JavaScript 读取属性值

■知识点

使用元素的getAttributeO方法可以读取指定属性的值。其用法如下：

    getAttribute(name)

其中，参数name表示属性名称。

■实例设计

【示例1】下面的示例访问红盒子和蓝盒子，然后读取这些元素所包含的id属性值。

<div id="red">红盒子</div>

<div id="blue">蓝盒子</div>

<script>

var red = document.getElementByld("red");       //获取红盒子

console.log(red.getAttribute("id"));                     //显示红盒子的id属性值

var blue = document.getElementByld("blue");    //获取蓝盒子

console.log(blue.getAttribute("id"));                    //显示蓝盒子的id属性值

</script>

【示例2】HTML DOM也支持使用点语法读取属性值，使用比较简便，也获得所有浏览器的支持。

var red = document.getElementByld("red"); 

console.log(red.id);

var blue = document.getElementByld("blue"); 

console.log(blue.id);

【示例3】使用className读写样式类。

<label id="labell" class="classl" for="textfieldn>文本框：

    <input type="text" name="textfield" id="textfield" /> 

</label>

<script>

var label = document.getElementByld("labell"); 

console.log(label.className); 

console.log(label.htmlFor);

</script>

【示例4】对于复合类样式，需要使用splito方法劈开返回的字符串，然后遍历读取类样式。

<div id="red" class="red blue">红盒子</div>

<script>

//所有类名生成的数组

var classNameArray = document.getElementByld("red").className.split("");

for (var i in classNameArray ) {         //遍历数组

    console.log (classNameArray[i]); //当前 class 名

}

</script>