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

列印頁面