轻松上手,快乐学习!

HTML DOM setAttribute() 方法


实例

将值为 "democlass" 的 class 属性添加到 <h1> 元素中:

document.getElementsByTagName("H1")[0].setAttribute("class", "democlass");

在设置属性之前:

在设置属性之后:

亲自试一试 »

页面下方有更多实例。


定义和用法

setAttribute() 方法将指定的属性添加到元素中,并为其指定值。

如果指定的属性已经存在,则只设置/更改该值。

注释: 虽然可以使用此方法将带有值的样式属性添加到元素中, 但建议您使用样式对象的属性来进行内联样式设置, 因为这不会覆盖样式属性中可能指定的其他CSS属性:

看起来不好:

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

看起来不错:

element.style.backgroundColor = "red";

提示: Use the removeAttribute() method to remove an attribute from an element.

提示: See also the setAttributeNode() method.


浏览器支持

表中的数字表示支持该方法的第一个浏览器版本。

方法
setAttribute() Yes 8.0 Yes Yes Yes

语法

element.setAttribute(attributename, attributevalue)

参数值

参数 类型 描述
attributename String 必需。要添加的属性的名称
attributevalue String 必需。要添加的属性的值

技术细节

返回值: 无返回值
DOM 版本 Core Level 1 Element Object

更多实例

实例

将输入字段更改为输入按钮:

document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");

在设置属性之前:

在设置属性之后:

亲自试一试 »

实例

向 <a> 元素添加一个值为 "www.begtut.com" 的 href 属性:

document.getElementById("myAnchor").setAttribute("href", "https://www.begtut.com");

在设置属性之前:

Go to begtut.com

在设置属性之后:

亲自试一试 »

实例

找出 <a> 元素是否有目标属性。如果是,请将目标属性的值更改为 "_self":

// Get the <a> element with id="myAnchor"
var x = document.getElementById("myAnchor"); 

// If the <a> element has a target attribute, set the value to "_self"
if (x.hasAttribute("target")) {      
  x.setAttribute("target", "_self");
}
亲自试一试 »

相关页面

HTML 教程: HTML 属性

HTML DOM 参考手册: getAttribute() 方法

HTML DOM 参考手册: hasAttribute() 方法

HTML DOM 参考手册: removeAttribute() 方法