<style>
.div1{
color: red;
}
</style>
</head>
<body>
<div>我是div</div>
<input type="radio"> <!-- 获取结果是 null -->
<!-- <input type="radio" checked> --> <!-- 获取结果是 空字符串 -->
<!-- <input type="radio" checked="checked"> --> <!-- 获取结果是 checked -->
<span index="第一个">我是span</span>
<script>
// 设定标签的属性值
// JavaScript中,对于标签属性的设定,分成若干中情况
// 比较复杂没有固定的用法,需要慢慢的理解和记忆
// 标签对象.setAttribute(属性 , 属性值)
// 1,标签本身具有属性
// console.dir(标签对象) 可以看到的
// 都可以通过标签直接操作,不一定要用 setAttribute()
// 例如:定义 id属性值, class属性值
var oDiv = document.querySelector('div');
console.dir(oDiv);
// oDiv.className = 'div1'; //可以直接操作
oDiv.setAttribute('class' , 'div1'); // 使用setAttribute()也可以
// 区别: 直接操作用 oDiv.className
// setAttribute 使用的是class
// 2,单选和复选框,checked属性
// 使用 getAttribute 和 setAttribute
// 如果直接使用 getAttribute 来获取标签的属性值
// 获取的结果是 null
// 如果在标签中设定checked属性,获取的是属性的属性值
// 如果不写属性值,即时有默认选中效果,获取的也是 空字符串
// 只有设定了内容,获取的结果,才是设定的内容
// 要想设定属性
// oRadio.setAttribute('checked' , 'checked'); // 可以
// oRadio.setAttribute('checked' , true); // 可以
// 设定的,获取的,都是字符串形式
// 除了 true / false,设定的是布尔值
// 与直接通过标签本身的属性来获取 是不同的
var oRadio = document.querySelector('[type="radio"]');
// console.dir(oRadio);
// set/get
// oRadio.setAttribute('checked' , true);
// console.log(oRadio.getAttribute('checked'));
// 通过属性操作
// oRadio.checked = 'checked'; // 可以
oRadio.checked = true; // 可以
// 获取结果,如果使用 oRadio.checked 属性,直接操作,结果都是 布尔值
console.log(oRadio.checked); // 获取的是 true / false 布尔值
// 其他一些属性的属性
// 定义之后,是不会出现在标签本身属性上
// 但是会出现在标签的内容上
// 也不能直接来获取
// 有些低版本浏览器,是可以设定和获取的
// 例如 name属性
var oSpan = document.querySelector('span');
oSpan.setAttribute('name' , 'spanspan')
oSpan.setAttribute('index' , '第一个')
console.dir(oSpan);
console.log(oSpan.name)
console.log(oSpan.index)
// 总结
// 1,标签本身属性上就有的
// id,class,checked
// 推荐使用属性本身操作
// 2,set和get,理论上可以设定一切属性和属性值
// 但是实际操作中,不同浏览器,操作方式和结果不同
// 一般使用 set和get 操作自定义属性和属性值
// 例如 index , number , res , idNumber....
// 3,实在记不住,可以先用set设定,看看行不行,再用get获取,看看行不行
// 总之就是先试试,一个不行,再换另一种方法
JS18-设定获取标签属性值
猜你喜欢
转载自blog.csdn.net/DcTbnk/article/details/105268597
今日推荐
周排行