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>