Element: toggleAttribute() method
The toggleAttribute()
method of the
Element
interface toggles a Boolean attribute (removing it if it is
present and adding it if it is not present) on the given element.
Syntax
js
toggleAttribute(name)
toggleAttribute(name, force)
Parameters
name
-
A string specifying the name of the attribute to be toggled. The attribute name is automatically converted to all lower-case when
toggleAttribute()
is called on an HTML element in an HTML document. force
Optional-
A boolean value which has the following effects:
- if not specified at all, the
toggleAttribute
method "toggles" the attribute namedname
— removing it if it is present, or else adding it if it is not present - if true, the
toggleAttribute
method adds an attribute namedname
- if false, the
toggleAttribute
method removes the attribute namedname
- if not specified at all, the
Return value
true
if attribute name
is eventually
present, and false
otherwise.
Exceptions
InvalidCharacterError
DOMException
-
The specified attribute
name
contains one or more characters which are not valid in attribute names.
Examples
In the following example, toggleAttribute()
is used to toggle the
disabled
attribute of an <input>
.
HTML
html
<input value="text" /> <button>toggleAttribute("disabled")</button>
JavaScript
js
const button = document.querySelector("button");
const input = document.querySelector("input");
button.addEventListener("click", () => {
input.toggleAttribute("disabled");
});
Result
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-toggleattribute① |
Browser compatibility
BCD tables only load in the browser