JS getAttribute()方法：读取元素的属性值

在 JavaScript 中，使用元素的 getAttribute() 方法可以读取指定属性的值。用法如下：

getAttribute(name)

参数 name 表示属性名称。

使用元素的 attributes 属性、getAttributeNode() 方法可以返回对应属性节点。

示例1

下面示例访问红色盒子和蓝色盒子，然后读取这些元素所包含的 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>

示例2

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 是一个道理。

示例3

使用 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>

示例4

对于复合类样式，需要使用 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>