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 贡献者修改。