Element: setAttribute() 方法

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

setAttribute() 方法是 Element 介面的一部分，用於在指定的元素上設定屬性值。如果該屬性已存在，則更新其值；否則，將新增具有指定名稱和值的新屬性。

要獲取屬性的當前值，請使用 getAttribute()；要刪除屬性，請呼叫 removeAttribute()。

如果您需要在將 Attr 節點新增到元素之前對其進行操作（例如，從另一個元素克隆），則可以使用 setAttributeNode() 方法代替。

語法

setAttribute(name, value)

name: 一個指定要設定其值的屬性名稱的字串。在 HTML 文件中的 HTML 元素上呼叫 setAttribute() 時，屬性名稱會自動轉換為全小寫。
value: 一個包含要賦給屬性的值的字串。任何非字串值都將自動轉換為字串。

布林屬性只要存在於元素上就被視為 true。您應該將 value 設定為空字串 ("") 或屬性名稱本身，並且不包含前導或尾隨空格。下面示例部分有實際演示。

由於指定的 value 會被轉換為字串，因此指定 null 不一定會達到您的預期。它不會刪除屬性或將其值設定為 null，而是將屬性的值設定為字串 "null"。如果您想刪除一個屬性，請呼叫 removeAttribute()。

無（undefined）。

InvalidCharacterError DOMException: 如果 name 值不是有效的 XML 名稱，則會引發異常；例如，名稱以數字、連字元或句點開頭，或者包含除字母數字字元、下劃線、連字元或句點之外的字元。

在下面的示例中，setAttribute() 用於設定 <button> 元素的屬性。

html

<button>Hello World</button>

button {
  height: 30px;
  width: 100px;
  margin: 1em;
}

const button = document.querySelector("button");

button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");

這演示了兩點

上面第一次呼叫 setAttribute() 顯示了將 name 屬性的值更改為 "helloButton"。您可以使用瀏覽器的頁面檢查器（Chrome、Edge、Firefox、Safari）來檢視這一點。
要設定布林屬性（例如 disabled）的值，您可以指定任何值。推薦的值是空字串或屬性本身的名稱。重要的是，只要屬性存在於元素上，無論其實際值如何，其值都被視為 true。屬性的缺失意味著其值為 false。透過將 disabled 屬性的值設定為空字串 ("")，我們實際上是將 disabled 設定為 true，從而導致按鈕被停用。

規範
DOM # ref-for-dom-element-setattribute①

此頁面最後修改於 2025年7月4日，由 MDN 貢獻者修改。