Our volunteers haven't translated this article into Română yet. Join us and help get the job done!
You can also read the article in English (US).

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.


Element.toggleAttribute(name [, force]);


A DOMString 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 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.


The specified attribute name contains one or more characters which are not valid in attribute names.


In the following example, toggleAttribute() is used to toggle the readonly attribute of a <input>.


<input value="text">


var button = document.querySelector("button"); 
var input = document.querySelector("input"); 

button.addEventListener("click", function(){


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 -


if (!Element.prototype.toggleAttribute) {
  Element.prototype.toggleAttribute = function(name, force) {
    if(force !== void 0) force = !!force 
    if (this.hasAttribute(name)) {
      if (force) return true;

      return false;
    if (force === false) return false;
    this.setAttribute(name, "");
    return true;


Specification Status Comment
The definition of 'Element.toggleAttribute' in that specification.
Living Standard  

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
toggleAttributeChrome Full support 69Edge Full support 18Firefox Full support 63IE ? Opera Full support 56Safari Full support 12WebView Android Full support 69Chrome Android Full support 69Firefox Android Full support 63Opera Android Full support 48Safari iOS Full support YesSamsung Internet Android ?


Full support  
Full support
Compatibility unknown  
Compatibility unknown

Document Tags and Contributors

Last updated by: Yukulele.,