JS 参考手册

JS 参考手册(类别排序) JS 参考手册(字母排序)

JavaScript

JS Array JS Boolean JS Classes JS Date JS Error JS Global JS JSON JS Math JS Number JS 运算符 JS RegExp JS 语句 JS String

HTML DOM

DOM Attributes DOM Document DOM Element DOM Events DOM Event 对象 DOM HTMLCollection DOM Location DOM Navigator DOM Screen DOM Style
alignContent alignItems alignSelf animation animationDelay animationDirection animationDuration animationFillMode animationIterationCount animationName animationTimingFunction animationPlayState background backgroundAttachment backgroundColor backgroundImage backgroundPosition backgroundRepeat backgroundClip backgroundOrigin backgroundSize backfaceVisibility border borderBottom borderBottomColor borderBottomLeftRadius borderBottomRightRadius borderBottomStyle borderBottomWidth borderCollapse borderColor borderImage borderImageOutset borderImageRepeat borderImageSlice borderImageSource borderImageWidth borderLeft borderLeftColor borderLeftStyle borderLeftWidth borderRadius borderRight borderRightColor borderRightStyle borderRightWidth borderSpacing borderStyle borderTop borderTopColor borderTopLeftRadius borderTopRightRadius borderTopStyle borderTopWidth borderWidth bottom boxShadow boxSizing captionSide caretColor clear clip color columnCount columnFill columnGap columnRule columnRuleColor columnRuleStyle columnRuleWidth columns columnSpan columnWidth counterIncrement counterReset cursor direction display emptyCells filter flex flexBasis flexDirection flexFlow flexGrow flexShrink flexWrap cssFloat font fontFamily fontSize fontStyle fontVariant fontWeight fontSizeAdjust height isolation justifyContent left letterSpacing lineHeight listStyle listStyleImage listStylePosition listStyleType margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth objectFit objectPosition opacity order orphans outline outlineColor outlineOffset outlineStyle outlineWidth overflow overflowX overflowY padding paddingBottom paddingLeft paddingRight paddingTop pageBreakAfter pageBreakBefore pageBreakInside perspective perspectiveOrigin position quotes resize right scrollBehavior tableLayout tabSize textAlign textAlignLast textDecoration textDecorationColor textDecorationLine textDecorationStyle textIndent textOverflow textShadow textTransform top transform transformOrigin transformStyle transition transitionProperty transitionDuration transitionTimingFunction transitionDelay unicodeBidi userSelect verticalAlign visibility width wordBreak wordSpacing wordWrap widows zIndex
DOM Window

Web APIs

API Console API Geolocation API History API Storage

HTML 对象

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> button <input> checkbox <input> color <input> date <input> datetime <input> datetime-local <input> email <input> file <input> hidden <input> image <input> month <input> number <input> password <input> radio <input> range <input> reset <input> search <input> submit <input> text <input> time <input> url <input> week <kbd> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <tfoot> <th> <thead> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>

其他参考手册

CSSStyleDeclaration JS 类型转换


HTML DOM setAttribute() 方法

❮ Element 对象

实例

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

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

在设置属性之前:

Hello World

在设置属性之后:

Hello World

亲自试一试 »

页面下方有更多实例。


定义和用法

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.w3ccoo.com" 的 href 属性:

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

在设置属性之前:

Go to www.w3ccoo.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() 方法


❮ Element 对象