Element.setAttribute()

在此页

句法
范例
规范
浏览器兼容性
相关话题

Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.

To get the current value of an attribute, use getAttribute() ; to remove an attribute, call removeAttribute() .

句法

Element.setAttribute(name, value);

参数

名称: 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: DOMString containing the value to assign to the attribute. Any non-string value specified is converted automatically into a string.

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 ( "" ) 在 value (some people use the attribute's name; this works but is non-standard). See the 范例 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() .

返回值

undefined .

异常

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

范例

在以下范例中， setAttribute() is used to set attributes on a <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 名称 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 被禁用 , 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 被禁用 attribute to the empty string ( "" ), we are setting 被禁用 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`	-

规范

规范	状态	注释
DOM The definition of 'setAttribute()' in that specification.	实时标准

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`setAttribute`	Chrome 1	Edge 12	Firefox 1	IE 5 5 In Internet Explorer 7 and earlier, `setAttribute` doesn't set styles and removes events when you try to set them.	Opera 8	Safari 3	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 1	Samsung Internet Android 1.0

图例

完整支持

Gecko notes

使用 setAttribute() to modify certain attributes, most notably value in XUL, works inconsistently, as the attribute specifies the default value. To access or modify the current values, you should use the properties. For example, use Element.value 而不是 Element.setAttribute() .

元数据

最后修改： Jan 2, 2020

在此页

句法

参数

返回值

异常

范例

HTML

JavaScript

规范

浏览器兼容性

图例

Gecko notes

相关话题