Element: setAttribute() method
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()
.
Syntax
js
setAttribute(name, value)
Parameters
name
-
A string 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
-
A string 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. You should set value
to the empty string (""
)
or the attribute's name, with no leading or trailing whitespace. See the example 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()
.
Return value
None (undefined
).
Exceptions
InvalidCharacterError
DOMException
-
The specified attribute
name
contains one or more characters which are not valid in attribute names.
Examples
In the following example, setAttribute()
is used to set attributes on a
<button>
.
HTML
html
<button>Hello World</button>
JavaScript
js
const button = document.querySelector("button");
button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");
This demonstrates two things:
-
The first call to
setAttribute()
above shows changing thename
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
disabled
, 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 betrue
. The absence of the attribute means its value isfalse
. By setting the value of thedisabled
attribute to the empty string (""
), we are settingdisabled
totrue
, 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 |
- |
Specifications
Specification |
---|
DOM Standard # ref-for-dom-element-setattribute① |
Browser compatibility
BCD tables only load in the browser
Gecko notes
Using 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
instead of Element.setAttribute()
.