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
Element.toggleAttribute(name [, force]);
Parameters
name
- A
DOMString
specifying the name of the attribute to be toggled. The attribute name is automatically converted to all lower-case whentoggleAttribute()
is called on an HTML element in an HTML document. force
Optional- A boolean value to determine whether the attribute should be added or removed, no matter whether the attribute is present or not at the moment.
Return value
true
if attribute name
is eventually present, and false
otherwise.
Exceptions
InvalidCharacterError
- The specified attribute
name
contains one or more characters which are not valid in attribute names.
Example
In the following example, toggleAttribute()
is used to toggle the readonly
attribute of a <input>
.
HTML
<input value="text">
<button>toggleAttribute("readonly")</button>
JavaScript
var button = document.querySelector("button"); var input = document.querySelector("input"); button.addEventListener("click", function(){ input.toggleAttribute("readonly"); });
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
|
- |
Polyfill
if (!Element.prototype.toggleAttribute) {
Element.prototype.toggleAttribute = function(name, force) {
if(force !== void 0) force = !!force
if (this.hasAttribute(name)) {
if (force) return true;
this.removeAttribute(name);
return false;
}
if (force === false) return false;
this.setAttribute(name, "");
return true;
};
}
Specification
Specification | Status | Comment |
---|---|---|
DOMThe definition of 'Element.toggleAttribute' in that specification. | Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
toggleAttribute
|
Chrome
Full support 69 |
Edge
Full support 18 |
Firefox
Full support 63 |
IE
No support No |
Opera
Full support 56 |
Safari
Full support 12 |
WebView Android
Full support 69 |
Chrome Android
Full support 69 |
Firefox Android
Full support 63 |
Opera Android
Full support 48 |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support 10.0 |
Legend
- Full support
- Full support
- No support
- No support
Element.toggleAttribute() by Mozilla Contributors is licensed under CC-BY-SA 2.5.