元素:setAttribute() 方法

setAttribute()Element 接口的方法,用于设置指定元素上属性的值。如果属性已存在,则更新其值;否则,将添加一个新的属性,其名称和值为指定的值。

若要获取属性的当前值,请使用 getAttribute();若要删除属性,请调用 removeAttribute()

如果您需要在添加属性之前操作 Attr 节点(例如,从另一个元素克隆),可以使用 setAttributeNode() 方法代替。

语法

js
setAttribute(name, value)

参数

name

指定要设置其值的属性名称的字符串。在 HTML 文档中对 HTML 元素调用 setAttribute() 时,属性名称会自动转换为全小写。

包含要分配给属性的值的字符串。任何指定的非字符串值都会自动转换为字符串。

如果布尔属性在元素上存在,则被认为是 true。您应该将 value 设置为空字符串 ("") 或属性名称,没有前导或尾随空格。有关实际演示,请参阅下面的 示例

由于指定的 value 会转换为字符串,因此指定 null 不一定能达到您的预期效果。它不会删除属性或将其值设置为 null,而是将属性的值设置为字符串 "null"。如果您想删除属性,请调用 removeAttribute()

返回值

无 (undefined).

异常

InvalidCharacterError DOMException

如果 name 值不是有效的 XML 名称;例如,它以数字、连字符或句点开头,或者包含除字母数字字符、下划线、连字符或句点之外的字符,则会抛出此异常。

示例

在以下示例中,setAttribute() 用于设置 <button> 上的属性。

HTML

html
<button>Hello World</button>

JavaScript

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

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

这演示了两件事

  • 上面的第一个对 setAttribute() 的调用显示将 name 属性的值更改为“helloButton”。您可以使用浏览器的页面检查器 ( ChromeEdgeFirefoxSafari) 查看此更改。
  • 要设置布尔属性的值,例如 disabled,您可以指定任何值。空字符串或属性名称是推荐值。重要的是,如果属性存在,无论其实际值如何,其值都被视为 true。属性的缺失意味着其值为 false。通过将 disabled 属性的值设置为空字符串 (""),我们将 disabled 设置为 true,这将导致按钮被禁用。

规范

规范
DOM 标准
# ref-for-dom-element-setattribute①

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅