在 JavaScript 中,使用元素的 getAttribute() 方法可以读取指定属性的值。用法如下:
参数 name 表示属性名称。
使用元素的 attributes 属性、getAttributeNode() 方法可以返回对应属性节点。
下面示例访问红色盒子和蓝色盒子,然后读取这些元素所包含的 id 属性值。
<div id="red">红盒子</div>
<div id="blue">蓝盒子</div>
<script>
var red = document.getElementById("red"); //获取红色盒子
console.log(red.getAttribute("id")); //显示红色盒子的id属性值
var blue = document.getElementById("blue"); //获取蓝色盒子
console.log(blue.getAttribute("id")); //显示蓝色盒子的id属性值
</script>
HTML DOM 也支持使用点语法读取属性值,使用比较简便,也获得了所有浏览器的支持。
var red = document.getElementById("red");
console.log(red.id);
var blue = document.getElementById("blue");
console.log(blue.id);
对于 class 属性,则必须使用 className 属性名,因为 class 是 JavaScript 的保留字;对于 for 属性,则必须使用 htmlFor 属性名,这与 CSS 脚本中 float 和 text 属性被改名为 cssFloat 和 cssText 是一个道理。
使用 className 读写样式类。
<label id="label1" class="class1" for="textfield">文本框:
<input type="text" name="textfield" id="textfield" />
</label>
<script>
var label = document.getElementById("label1");
console.log(label.className);
console.log(label.htmlFor);
</script>
对于复合类样式,需要使用 split() 方法劈开返回的字符串,然后遍历读取类样式。
<div id="red" class="red blue">红盒子</div>
<script>
//所有类名生成的数组
var classNameArray = document.getElementById("red").className.split(" ");
for (var i in classNameArray) { //遍历数组
console.log(classNameArray[i]); //当前class名
}
</script>