Element.setAttribute()
设置指定元素上的某个属性值。如果属性已经存在,则更新该值;否则,使用指定的名称和值添加一个新的属性。
要获取某个属性当前的值,可使用 getAttribute()
;要删除某个属性,可使用 removeAttribute()
。
语法
element.setAttribute(name, value);
参数
name
-
表示属性名称的字符串。A
DOMString
specifying the name of the attribute whose value is to be set. The attribute name is automatically converted to all lower-case whensetAttribute()
is called on an HTML element in an HTML document. value
-
属性的值/新值。A
DOMString
包含了分配给这个属性的值。任何非字符串的值都会被自动转换为字符串。
当在 HTML 文档中的 HTML 元素上调用 setAttribute()
方法时,该方法会将其属性名称(attribute name)参数小写化。
如果指定的属性已经存在,则其值变为传递的值。如果不存在,则创建指定的属性。
尽管对于不存在的属性,getAttribute()
(en-US) 返回 null
,你还是应该使用 removeAttribute()
代替 elt.setAttribute(attr, null)
来删除属性。
布尔属性(原文是 Boolean attributes)只要出现在元素上就会被认为是 true
,无论它的值是什么; 一般来说,你应该将 value
设置为空字符串 (""
) 。(一些人使用这个属性的名称作为值; 这不会出现什么问题,但这是不规范的). See the example below for a practical demonstration.
由于将指定的值转换为字符串,因此指定 null 不一定能达到你的期望。而不是删除属性或将其值设置为null
,而是将属性的值设置为字符串“null”。如果要删除属性,请调用removeAttribute()
}。
返回值
例外
无效字符错误
-
指定的属性名称包含一个或多个在属性名称中无效的字符。
示例
在下面的例子中,setAttribute()
被用于设置 <button>
上的属性。
HTML
html
<button>Hello World</button>
JavaScript
js
var b = document.querySelector("button");
b.setAttribute("name", "helloButton");
b.setAttribute("disabled", "");
这说明了两件事:
- 上面对 setAttribute() 的第一次调用显示了将 name 属性的值更改为“helloButton”。你可以使用浏览器的页面检查器(Chrome,Edge,Firefox,Safari)查看此内容。
- 要设置布尔属性的值(例如禁用),可以指定任何值。建议使用空字符串或属性名称。重要的是,如果根本不存在该属性,则不管其实际值如何,都将其值视为真实。该属性的缺失表示其值是 false。通过将 Disabled 属性的值设置为空字符串(“”),我们将 disable 设置为 true,这将导致按钮被禁用。
DOM methods dealing with element's attributes:
Not namespace-aware, most commonly used methods | Namespace-aware variants (DOM Level 2) | DOM Level 1 methods for dealing with Attr nodes directly (seldom used) |
DOM Level 2 namespace-aware methods for dealing with Attr nodes directly (seldom used) |
---|---|---|---|
setAttribute (DOM 1) |
setAttributeNS |
setAttributeNode |
setAttributeNodeNS |
getAttribute (DOM 1) |
getAttributeNS (en-US) |
getAttributeNode |
getAttributeNodeNS |
hasAttribute (DOM 2) |
hasAttributeNS |
- | - |
removeAttribute (DOM 1) |
removeAttributeNS |
removeAttributeNode |
- |
规范
浏览器兼容性
BCD tables only load in the browser
Gecko 备注
使用 setAttribute()
修改某些属性值时,尤其是 XUL 中的 value
,可能得不到期望结果。这是由于 attribute
指定的是默认值。要访问或修改当前值,应该使用 property
属性。例如,使用 Element.value
代替 Element.setAttribute()
。