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

打印页面