JS setAttribute()方法：設定元素的屬性值

在 JavaScript 中，使用元素的 setAttribute() 方法可以設定元素的屬性值。用法如下：

setAttribute(name, value)

引數 name 和 value 分別表示屬性名稱和屬性值。屬性名和屬性值必須以字串的形式進行傳遞。如果元素中存在指定的屬性，它的值將被重新整理；如果不存在，則 setAttribute() 方法將為元素建立該屬性並賦值。

範例1

下面範例分別為頁面中 div 元素設定 title 屬性。

<div id="red">紅盒子</div>
<div id="blue">藍盒子</div>
<script>
    var red = document.getElementById("red");  //獲取紅盒子的參照
    var blue= document.getElementById("blue");  //獲取藍盒子的參照
    red.setAttribute("title", "這是紅盒子");  //為紅盒子物件設定title屬性和值
    blue.setAttribute("title", "這是藍盒子");  //為藍盒子物件設定title屬性和值
</script>

範例2

下面範例定義了一個文字節點和元素節點，並為一級標題元素設定 title 屬性，最後把它們新增到文件結構中。

var hello = document.createTextNode("Hello World!");  //建立一個文字節點
var h1 = document.createElement("h1");  //建立一個一級標題
h1.setAttribute("title", "你好，歡迎光臨！");  //為以及標題定義title 屬性
h1.appendChild(hello);  //把文字節點增加到一級標題中
document.body.appendChild(h1);  //把一級標題增加到文件

範例3

也可以使用快捷方法設定 HTML DOM 文件中元素的屬性值。

<label id="label1">文字方塊：
    <input type="text" name="textfield" id="textfield" />
</label>
<script>
    var label1 = document.getElementById("label1");
    label.className = "class1";
    label.htmlFor = "textfield";
</script>

DOM 支援使用 getAttribute() 和 setAttribute() 方法讀寫自定義屬性，不過 IE 6.0 及其以下版本瀏覽器對其的支援不是很完善。

範例4

直接使用 className 新增類樣式，會覆蓋掉元素原來的類樣式。這時可以採用疊加的方式新增類。

<div id="red">紅盒子</div>
<script>
    var red = document.getElementById("red");
    red.className = "red";
    red.className += "blue";
</script>

範例5

使用疊加的方式新增類也存在問題，這樣容易新增大量重複的類。為此，定義一個檢測函數，判斷元素是否包含指定的類，然後再決定是否新增類。

<script>
    function hasClass (element, className) {  //檢測類名函數
        var reg = new RegExp('(s|^)' + className + '(s|$)');
        return reg.test(element.className);  //使用正則檢測是否有相同的樣式
    }
    function addClass (element, className) {  //新增類名函數
        if (! hasClass (element, className))
            element.className += ' ' + className;
    }
</script>
<div id="red">紅盒子</div>
<script>
    var red = document.getElementById("red");
    addClass(red, 'red');
    addClass(red, 'blue');
</script>