HTML DOM Element setAttribute() 方法

定义和用法

setAttribute() 方法添加指定的属性，并为其赋指定的值。

如果这个指定的属性已存在，则仅设置/更改值。

注意：HTML 文档的 HTMLElement 对象还定义了对应所有标准 HTML 属性的 JavaScript 属性。因此，只有您需要设置非标准属性的时候，才需要使用该方法。

另请参阅：

参考手册：

getAttribute() 方法

removeAttribute() 方法

hasAttribute() 方法

hasAttributes() 方法

getAttributeNode() 方法

setAttributeNode() 方法

removeAttributeNode() 方法

教程：

HTML 属性

实例

例子 1

向元素添加 class 属性：

element.setAttribute("class", "democlass");

添加之前：

Element 对象

添加之后：

Element 对象

亲自试一试

例子 2

将输入字段改为按钮：

myInput.setAttribute("type", "button");

亲自试一试

更改之前：

更改之后：

例子 3

向 <a> 元素添加 href 属性：

myAnchor.setAttribute("href", "");

亲自试一试

添加之前：

请访问 w3school.com.cn

添加之后：

请访问 w3school.com.cn

例子 4

将 target 属性的值更改为 "_self"：

if (element.hasAttribute("target")) {      
  element.setAttribute("target", "_self");
}

亲自试一试

语法

element.setAttribute(name, value)

参数

参数 描述
name 必需。属性的名称。
value 必需。新的属性值。

返回值

无。

抛出

异常 描述
INVALID_CHARACTER_ERR 参数 name 含有 HTML 属性名或 XML 属性名不允许使用的字符。
NO_MODIFICATION_ALLOWED_ERR 当前元素是只读的，不允许修改它的属性。

注意

可以为元素添加带有值的 style 属性，但不建议您这样做，因为它会覆盖 style 属性中的其他属性。

请改用 Style 对象的属性：

劣：

element.setAttribute("style", "background-color:red;");

优：

element.style.backgroundColor = "red";

浏览器支持

element.setAttribute() 是 DOM Level 1 (1998) 特性。

所有浏览器都完全支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持