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 支持 支持 支持 支持