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 |
---|---|---|
DOM The 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.
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