JavaScript 讀取屬性值

■知識點

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

    getAttribute(name)

其中，參數(shù)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>

//所有類名生成的數(shù)組

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

for (var i in classNameArray ) {         //遍歷數(shù)組

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

}

</script>