这篇翻译不完整。请帮忙从英语翻译这篇文章

设置指定元素上的某个属性值。如果属性已经存在,则更新该值;否则,使用指定的名称和值添加一个新的属性。

要获取某个属性当前的值,可使用 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 when setAttribute() is called on an HTML element in an HTML document.
value
属性的值/新值。A DOMString containing the value to assign to the attribute. Any non-string value specified is converted automatically into a string.

当在 HTML 文档中的 HTML 元素上调用 setAttribute() 方法时,该方法会将其属性名称(attribute name)参数小写化。

如果指定的属性已经存在,则其值变为传递的值。如果不存在,则创建指定的属性。

尽管对于不存在的属性,getAttribute() 返回 null,你还是应该使用 removeAttribute() 代替 elt.setAttribute(attr, null) 来删除属性。

Boolean attributes are considered to be true if they're present on the element at all, regardless of their actual value; as a rule, you should specify the empty string ("") in value (some people use the attribute's name; this works but is non-standard). See the example below for a practical demonstration.

Since the specified value gets converted into a string, specifying null doesn't necessarily do what you expect. Instead of removing the attribute or setting its value to be null, it instead sets the attribute's value to the string "null". If you wish to remove an attribute, call removeAttribute().

Return value

undefined

Exceptions

InvalidCharacterError
The specified attribute name contains one or more characters which are not valid in attribute names.

例子

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

HTML

<button>Hello World</button>

JavaScript

var b = document.querySelector("button"); 

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

This demonstrates two things:

  • The first call to setAttribute() above shows changing the name attribute's value to "helloButton". You can see this using your browser's page inspector (Chrome, Edge, Firefox, Safari).
  • To set the value of a Boolean attribute, such as disabled, you can specify any value. An empty string or the name of the attribute are recommended values. All that matters is that if the attribute is present at all, regardless of its actual value, its value is considered to be true. The absence of the attribute means its value is false. By setting the value of the disabled attribute to the empty string (""), we are setting disabled to true, which results in the button being disabled.

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 getAttributeNode getAttributeNodeNS
hasAttribute (DOM 2) hasAttributeNS - -
removeAttribute (DOM 1) removeAttributeNS removeAttributeNode -

规范

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
setAttributeChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 5
Notes
Full support 5
Notes
Notes In Internet Explorer 7 and earlier, setAttribute doesn't set styles and removes events when you try to set them.
Opera Full support YesSafari Full support 6WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

Gecko 备注

使用 setAttribute() 修改某些属性值时,尤其是 XUL 中的 value,可能得不到期望结果。这是由于 attribute 指定的是默认值。要访问或修改当前值,应该使用 property 属性。例如,使用 Element.value 代替 Element.setAttribute()

文档标签和贡献者

最后编辑者: RainSlide,