HTML - DOM setAttribute() 方法

HTML DOM 的setAttribute() 方法用于为 DOM 中指定的元素添加或更新属性。HTML 中的属性是 HTML 元素的特殊特征或属性，提供有关该元素的附加信息。

如果指定的元素不存在，该方法不会创建该元素；相反，如果在不存在的元素上调用此方法，则会抛出错误。要为元素设置属性，必须首先确保该元素存在于 DOM 中。

以下交互式示例演示了 setAttribute() 方法在不同场景中的用法：

DOM setAttribute() 方法

欢迎来到 Tutorialspoint..

您来对地方学习了……

如果单击“添加”按钮，此方法将向第一段添加“style”属性。
如果单击“更新”按钮，此方法将更新第一段的现有“style”属性。

语法

以下是 HTML DOM setAttribute() 方法的语法：

element.setAttribute(attributeName, attributeValue);

参数

此方法接受如下所述的两个参数：

参数	描述
attributeName	要设置或更改的属性的名称。
attributeValue	要为属性定义的新值。

返回值

此方法不返回任何值。

示例 1：为 HTML 元素设置属性

以下程序演示了如何使用 HTML DOM setAttribute() 方法在单击<button>时将样式设置为<h2> 元素：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM setAttribute()</title>
</head>
<body>
<p>Click the button below to change the color and font size of the heading:</p>
<h2 id="h">Welcome</h2>
<button onclick="changeColor()">Change Color</button>
<script>
   function changeColor() {
      const heading = document.getElementById('h');
      heading.setAttribute('style', 'color: red; font-size: 24px;');
   }
</script>
</body>
</html>

示例 2：为 Div 元素设置内联样式

以下是 HTML DOM setAttribute() 方法的另一个示例。我们使用此方法通过设置属性来更改现有<div>的内联样式：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM setAttribute()</title>
<style>
   .container {
       padding: 20px; 
       border: 1px solid black;
       margin-bottom: 10px;
       color: blue;
       font-size: 18px;
    }
    button{
       padding: 10px;
   }
</style>
</head>
<body>
<h1>HTML - DOM Element</h1>
<h2>setAttribute() Method</h2>
<h4>Setting Inline Styles</h4>
<div id="ex" class="container">This div has inline Styles. Click below to change my Style!</div>
<button onclick="setInlineStyles()">Change Inline Styles</button>
<script>
   function setInlineStyles() {
      const ele = document.getElementById('ex');
      ele.setAttribute('style', 'color: green; font-size: 24px;');
   }
</script>
</body>
</html>

示例 3：在新的元素上创建和设置属性

以下示例演示了通过创建和设置新元素上的属性来使用setAttribute() 方法。它创建一个新的 <div> 元素并将其附加到文档正文：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM setAttribute()</title>
<style>
   .container {
       padding: 20px;
       background-color: #f9f99f;
       border: 1px solid black;
    }
    button{
       padding: 10px;
   }
</style>
</head>
<body>
<h1>HTML - DOM Element</h1>
<h2>setAttribute() Method</h2>
<p>Creates and Sets Attributes on a New Element</p>
<button onclick="createAndSetAttributes()">Create New Element</button>
<script>
   function createAndSetAttributes() {
      const nd = document.createElement('div');
      nd.setAttribute('id', 'nd');
      nd.setAttribute('class', 'container');
      nd.textContent="This is a newly created div.";
      document.body.appendChild(nd);
   }
</script>
</body>
</html>

示例 4：为 Div 元素设置 Class 属性

此示例演示了通过在单击按钮时向现有 <div> 添加类属性 (highlight) 来使用setAttribute() 方法：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM setAttribute()</title>
<style>
    .container {
       padding: 20px;
       background-color: #f0f0ff;
       border: 1px solid black;
       margin-bottom: 10px;
    }
    .highlight {
       background-color: yellow;
    }
	button{
	   padding: 10px;
    }
</style>
</head>
<body>    
<h1>HTML - DOM Element</h1>
<h2>setAttribute() Method</h2>
<h4>Click button to apply class Attribute</h4>
<div id="ex" class="container">This div has class "container".</div>
<button onclick="addClass()">Add Class 'highlight'</button>
<script>
   function addClass() {
      const ele = document.getElementById('ex');
      ele.setAttribute('class','container highlight'); 
   }
</script>
</body>
</html>

支持的浏览器

方法
setAttribute()	是	是	是	是	是

html_dom_element_reference.htm

打印页面