在 JavaScript 中為 DOM 元素新增屬性
Jagathish
2023年1月30日
2022年5月1日
本教程教授如何向 DOM 元素新增屬性。我們可以使用兩種方法向 DOM 元素新增屬性。
首先是 setAttribute(name, value)
,其次是 setAttributeNode(attribute_node)
。
使用 setAttribute
方法將屬性設定為 DOM 元素
setAttribute
方法將:
- 如果指定的屬性不存在,則向 DOM 元素新增新屬性。
- 如果指定的屬性已經存在,則更新 DOM 元素的屬性值。
此方法將屬性名稱和值作為引數。
<div id="div" name="div_ele" > Div </div>
使用 setAttribute
方法設定屬性的 JavaScript 程式碼。
let divElement = document.getElementById("div");
divElement.setAttribute("order", 1);
divElement.setAttribute("name", "DIV");
執行上述程式碼後,div 元素將有一個新的屬性 order
,其值為 1
,屬性 name
的值將從 div_ele
更新為 DIV
。
<div id="div" name="DIV" order="1"> Div </div>
使用 setAttributeNode
方法為 DOM 元素設定屬性
setAttributeNode
方法的功能類似於 setAttribute
方法。唯一的區別是 setAttributeNode
方法將 Attr
節點作為引數。
<div id="div" name="DIV" order="1"> Div </div>
使用 setAttributeNode
方法設定屬性的 JavaScript 程式碼
let divElement = document.getElementById("div");
let orderAttrNode = document.createAttribute('order');
orderAttrNode.value="2";
divElement.setAttributeNode(orderAttrNode);
let testAttrNode = document.createAttribute('test');
testAttrNode.value="test_div";
divElement.setAttributeNode(testAttrNode);
執行上述程式碼後,div 元素將有一個新的屬性 test
,其值為 test_div
,屬性 order
的值將從 1
更新為 2
。
<div id="div" name="DIV" order="2" test="test_div"> Div </div>
要測試上述程式碼的有效性,你可以訪問此連結。