JavaScript 讀取屬性值

■知識(shí)點(diǎn)

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

    getAttribute(name)

其中，參數(shù)name表示屬性名稱。

■實(shí)例設(shè)計(jì)

【示例1】下面的示例訪問(wèn)紅盒子和藍(lán)盒子，然后讀取這些元素所包含的id屬性值。

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

<div id="blue">藍(lán)盒子</div>

<script>

var red = document.getElementByld("red");       //獲取紅盒子

console.log(red.getAttribute("id"));                     //顯示紅盒子的id屬性值

var blue = document.getElementByld("blue");    //獲取藍(lán)盒子

console.log(blue.getAttribute("id"));                    //顯示藍(lán)盒子的id屬性值

</script>

【示例2】HTML DOM也支持使用點(diǎn)語(yǔ)法讀取屬性值，使用比較簡(jiǎn)便，也獲得所有瀏覽器的支持。

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】對(duì)于復(fù)合類樣式，需要使用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]); //當(dāng)前 class 名

}

</script>