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

<p><span class="seoSummary">Imposta il valore di un attributo sull'elemento specificato. Se l'attributo esiste già, il valore viene aggiornato; in caso contrario viene aggiunto un nuovo attributo con il nome e il valore specificati.</span></p>

<p>Per ottenere il valore corrente di un attributo, utilizza il metodo {{domxref("Element.getAttribute", "getAttribute()")}}; per rimuovere un attributo, usa {{domxref("Element.removeAttribute", "removeAttribute()")}}.</p>

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

<pre class="syntaxbox"><em>Element</em>.setAttribute(<em>nome</em>, <em>valore</em>);
</pre>

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

<dl>
 <dt><code>nome</code></dt>
 <dd>Una {{domxref("DOMString")}} specifica il nome dell'attributo il cui valore deve essere impostato. Il nome dell'attributo viene automaticamente convertito in minuscolo quando <code>setAttribute()</code> viene chiamato su un elemento in un documento HTML.</dd>
 <dt><code>valore</code></dt>
 <dd>Una {{domxref("DOMString")}} contenente il valore da assegnare all'attributo. Qualsiasi valore non stringa specificato viene convertito automaticamente in una stringa.</dd>
</dl>

<p>Gli attributi booleani sono considerati <code>true</code> se sono presenti sull'elemento, indipendentemente dal loro <code>valore</code> effettivo; di norma, è necessario specificare la stringa vuota (<code>""</code>) in <code>valore</code> (alcune persone usano il nome dell'attributo, ma funziona in modo non standard). Vedi l'{{anch ("Esempio", "esempio")}} sotto per una dimostrazione pratica.</p>

<p>Poiché il <code>valore</code> specificato viene convertito in una stringa, specificare <code>null</code> non fa necessariamente ciò che si aspetta. Invece di rimuovere l'attributo o impostarne il valore come {{jsxref("null")}}, imposta invece il valore dell'attributo sulla stringa <code>null</code>. Se vuoi rimuovere un attributo, usa {{domxref("Element.removeAttribute", "removeAttribute()")}}.</p>

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

<p>{{jsxref("undefined")}}.</p>

<h3 id="Eccezioni">Eccezioni</h3>

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

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

<p>Nell'esempio seguente, <code>setAttribute()</code> viene utilizzato per impostare gli attributi su un {{HTMLElement("button")}}.</p>

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

<pre class="brush: html">&lt;button&gt;Hello World&lt;/button&gt;</pre>

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

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

b.setAttribute("name", "helloButton");
b.setAttribute("disabled", "");
</pre>

<p>Questo dimostra due cose:</p>

<ul>
 <li>La prima chiamata a <code>setAttribute()</code> mostra la modifica del valore dell'attributo <code>name</code> su "helloButton". Puoi vederlo usando l'ispettore di pagina del tuo browser (<a href="https://developers.google.com/web/tools/chrome-devtools/inspect-styles">Chrome</a>, <a href="https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide/dom-explorer">Edge</a>, <a href="/en-US/docs/Tools/Page_Inspector">Firefox</a>, <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html">Safari</a>).</li>
 <li>Per impostare il valore di un attributo booleano, come <code>disabled</code>, puoi specificare qualsiasi valore. Una stringa vuota o il nome dell'attributo sono valori consigliati. Tutto ciò che conta è che se l'attributo è presente a tutti, <em>indipendentemente dal suo valore reale</em>, il suo valore è considerato <code>true</code>. L'assenza dell'attributo significa che il suo valore è <code>false</code>. Impostando il valore dell'attributo <code>disabled</code> sulla stringa vuota (<code>""</code>), stiamo impostando <code>disabled</code> su <code>true</code>, il risultato è che il pulsante è disabilitato.</li>
</ul>

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

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

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

<ul>
 <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (introduced in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</li>
 <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5: APIs in HTML documents</a></li>
</ul>

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



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

<h3 id="Notes" name="Notes">Gecko notes</h3>

<p>L'utilizzo di <code>setAttribute()</code> per modificare determinati attributi, in particolare <code>value</code> in XUL, funziona in modo incoerente, in quanto l'attributo specifica il valore predefinito. Per accedere o modificare i valori correnti, è necessario utilizzare le proprietà. Ad esempio, utilizzare <code>Element.value</code> anziché <code>Element.setAttribute()</code>.</p>