Element.toggleAttribute()

Il metodo toggleAttribute() dell'interfaccia Element attiva/disattiva un attributo booleano (rimuovendolo se è presente e aggiungendolo se non è presente) sull'elemento specificato.

Sintassi

Element.toggleAttribute(name [, force]);

Parametri

name

Una DOMString che specifica il nome dell'attributo da attivare. Il nome dell'attributo viene automaticamente convertito in minuscolo quando toggleAttribute() viene chiamato su un elemento HTML in un documento HTML.

force Optional

Un valore booleano per determinare se l'attributo deve essere aggiunto o rimosso, indipendentemente dal fatto che l'attributo sia presente o meno al momento.

Valore di ritorno

true se l'attributo name è eventualmente presente, in caso contrario false.

Exceptions

InvalidCharacterError

L'attributo specificato name contiene uno o più caratteri che non sono validi nei nomi degli attributi.

Esempio

Nell'esempio seguente, toggleAttribute() viene utilizzato per commutare l'attributo  readonly di un <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");
});

Risultato

DOM methods dealing with element's attributes:

Polyfill

if (!Element.prototype.toggleAttribute) {
  Element.prototype.toggleAttribute = function(name, force) {
    if(force !== void 0) force = !!force 
    
    if (this.getAttribute(name) !== null) {
      if (force) return true;
      
      this.removeAttribute(name);
      return false;
    } else {
      if (force === false) return false;
      
      this.setAttribute(name, "");
      return true;
    }
  };
}

Specifiche

Compatibilità con i browser