---
title: Element.toggleAttribute()
slug: Web/API/Element/toggleAttribute
translation_of: Web/API/Element/toggleAttribute
---
<div>{{APIRef("DOM")}}</div>

<p>Il metodo <code><strong>toggleAttribute()</strong></code> dell'interfaccia {{domxref("Element")}} attiva/disattiva un attributo booleano (rimuovendolo se è presente e aggiungendolo se non è presente) sull'elemento specificato.</p>

<h2 id="Sintassi">Sintassi</h2>

<pre class="syntaxbox"><em>Element</em>.toggleAttribute(<em>name</em> [, <em>force</em>]);
</pre>

<h3 id="Parametri">Parametri</h3>

<dl>
 <dt><code>name</code></dt>
 <dd>Una {{domxref("DOMString")}} che specifica il nome dell'attributo da attivare. Il nome dell'attributo viene automaticamente convertito in minuscolo quando <code>toggleAttribute()</code> viene chiamato su un elemento HTML in un documento HTML.</dd>
 <dt><code>force</code> {{optional_inline}}</dt>
 <dd>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.</dd>
</dl>

<h3 id="Valore_di_ritorno">Valore di ritorno</h3>

<p><code>true</code> se l'attributo <strong><code>name</code></strong> è eventualmente presente, in caso contrario <code>false</code>.</p>

<h3 id="Exceptions">Exceptions</h3>

<dl>
 <dt><code>InvalidCharacterError</code></dt>
 <dd>L'attributo specificato <code>name</code> contiene uno o più caratteri che non sono validi nei nomi degli attributi.</dd>
</dl>

<h2 id="Esempio">Esempio</h2>

<p>Nell'esempio seguente, <code>toggleAttribute()</code> viene utilizzato per commutare l'attributo  <code>readonly</code> di un {{HTMLElement("input")}}.</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;input value="text"&gt;
&lt;button&gt;toggleAttribute("readonly")&lt;/button&gt;</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush:js">var button = document.querySelector("button");
var input = document.querySelector("input");

button.addEventListener("click", function(){
  input.toggleAttribute("readonly");
});
</pre>

<h3 id="Risultato">Risultato</h3>

<p>{{ EmbedLiveSample('Esempio', '300', '50') }}</p>

<p>{{DOMAttributeMethods}}</p>

<h2 id="Polyfill">Polyfill</h2>

<pre class="brush: js">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;
    }
  };
}
</pre>

<h2 id="Specifiche">Specifiche</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specifica</th>
   <th scope="col">Stato</th>
   <th scope="col">Commento</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#dom-element-toggleattribute', 'Element.toggleAttribute')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>



<p>{{Compat("api.Element.toggleAttribute")}}</p>