位置:首頁 > 軟件操作教程 > 編程開發(fā) > JavaScript > 問題詳情

JavaScript 讀取屬性值

提問人:劉團(tuán)圓發(fā)布時(shí)間:2020-11-26

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

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

    getAttribute(name)

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

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

【示例1】下面的示例訪問紅盒子和藍(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)語法讀取屬性值,使用比較簡便,也獲得所有瀏覽器的支持。

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>

繼續(xù)查找其他問題的答案?

相關(guān)視頻回答
回復(fù)(0)
返回頂部