HTML - DOM 元素 setAttributeNode() 方法

**setAttributeNode()** 方法允許您為特定元素定義特定的屬性節點。它會更新任何現有的屬性節點。

語法

element.setAttributeNode(newAttrNode);

引數

此方法接受如下所述的一個引數。

引數	描述
newAttrNode	您要為特定元素定義的新節點。

返回值

setAttributeNode() 方法並不總是返回值；相反，它為元素設定新的屬性節點值。但是，如果更新了屬性，則它會返回一個“Attr”物件，該物件儲存更新的屬性節點。

HTML DOM 元素“setAttributeNode()”方法示例

以下是 setAttributeNode() 方法的一些示例，這些示例演示了它在動態修改 HTML 屬性節點中的用法。

在 Div 元素上設定 Class 屬性節點

此示例演示如何使用 setAttributeNode() 方法在 **<div>** 元素上設定 class 屬性。以下程式碼包含一個按鈕，單擊該按鈕時，會動態建立新的 Div 元素。

<!DOCTYPE html>
<html>
<head>
  <style>
    .setAttr {
        color: red;
    }
  </style>
</head>

<body>
  <h1>HTML DOM Element</h1>
  <h2>The setAttributeNode() Method</h2>
  <p>Click "Change" to set the class attribute 
    to a div element.
  </p>

  <button onclick="myFunction()">Change</button>

  <script>
    function myFunction() { 
      var divele = document.createElement('div');
      divele.textContent = 
      "This is a dynamically created div element.";

      // Create a new class attribute node
      var clsatr = document.createAttribute('class');
      clsatr.value = 'setAttr';

      divele.setAttributeNode(clsatr); 
      document.body.appendChild(divele);
    }
  </script>
</body>

</html>

為 Div 元素新增動態顏色更改

此示例演示如何透過單擊按鈕動態更改 <div> 元素的背景顏色。當您單擊“更改顏色”時，<div> 元素的背景顏色將更新為隨機顏色。

<!DOCTYPE html>
<html>
<head>
  <title>Change Element Color</title>
</head>

<body>
  <h1>HTML DOM Element</h1>
  <h2>The setAttributeNode() Method</h2>
  <p>Keep clicking "Change Color" to change the 
    color continuously of the <div> element.
  </p>

  <button onclick="changeColor()">
    Change Color
  </button>
  <hr>
  <div id="myd"style="width:200px;height:200px;
  background-color:lightblue;">
    This is a div element.
  </div>

  <script>
    function changeColor() { 
      var ele = document.getElementById('myd');
      // Generate a random hex color
      var randomColor = '#' + Math.floor
      (Math.random()*16777215).toString(16); 

      // Set the background color using setAttribute()
      ele.setAttribute
      ('style','width:200px;height:200px;background-color:'
      +randomColor+';');
    }
  </script>
</body>

</html>

向現有段落新增自定義屬性

此示例演示如何使用 setAttributeNode() 方法向現有的段落 (**<p>**) 元素新增自定義屬性。以下程式碼包含一個按鈕，單擊該按鈕時，會動態將自定義屬性新增到段落。

<!DOCTYPE html>
<html>
<head>
  <title>setAttribute() Example</title>
</head>

<body>
  <h1>HTML DOM Element</h1>
  <h2>The setAttributeNode() Method</h2> 
  <p>Click "Add Attribute" to set a custom 
    attribute on a paragraph.
  </p>

  <button onclick="addCustomAttribute()">
    Add Attribute
  </button>
  <hr>
  <p id="myPara">This is a paragraph element.</p>

  <script>
    function addCustomAttribute() { 
      var para= document.getElementById('myPara');

      // Set a custom attribute using setAttribute()
      para.setAttribute
      ('data-custom','Hello, this is a custom attribute!');

      // Show a message to the user
      var msg = document.createElement('p');
      msg.textContent = 'Custom attribute added!';
      document.body.appendChild(msg);
    }
  </script>
</body>

</html>

支援的瀏覽器

方法
setAttributeNode()	是	是	是	是	是

html_dom_element_reference.htm

列印頁面