Element.setAttribute()

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.

Per ottenere il valore corrente di un attributo, utilizza il metodo getAttribute(); per rimuovere un attributo, usa removeAttribute().

Sintassi

Element.setAttribute(nome, valore);

Parametri

nome: Una DOMString specifica il nome dell'attributo il cui valore deve essere impostato. Il nome dell'attributo viene automaticamente convertito in minuscolo quando setAttribute() viene chiamato su un elemento in un documento HTML.
valore: Una DOMString contenente il valore da assegnare all'attributo. Qualsiasi valore non stringa specificato viene convertito automaticamente in una stringa.

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

Poiché il valore specificato viene convertito in una stringa, specificare null non fa necessariamente ciò che si aspetta. Invece di rimuovere l'attributo o impostarne il valore come null, imposta invece il valore dell'attributo sulla stringa null. Se vuoi rimuovere un attributo, usa removeAttribute().

Valore di ritorno

undefined.

Eccezioni

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

Esempio

Nell'esempio seguente, setAttribute() viene utilizzato per impostare gli attributi su un <button> (en-US).

HTML

<button>Hello World</button>

JavaScript

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

b.setAttribute("name", "helloButton");
b.setAttribute("disabled", "");

Questo dimostra due cose:

La prima chiamata a setAttribute() mostra la modifica del valore dell'attributo name su "helloButton". Puoi vederlo usando l'ispettore di pagina del tuo browser (Chrome, Edge, Firefox, Safari).
Per impostare il valore di un attributo booleano, come disabled, 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, indipendentemente dal suo valore reale, il suo valore è considerato true. L'assenza dell'attributo significa che il suo valore è false. Impostando il valore dell'attributo disabled sulla stringa vuota (""), stiamo impostando disabled su true, il risultato è che il pulsante è disabilitato.

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` (en-US)	`setAttributeNode` (en-US)	`setAttributeNodeNS` (en-US)
`getAttribute` (DOM 1)	`getAttributeNS` (en-US)	`getAttributeNode` (en-US)	`getAttributeNodeNS` (en-US)
`hasAttribute` (DOM 2)	`hasAttributeNS` (en-US)	-	-
`removeAttribute` (DOM 1)	`removeAttributeNS` (en-US)	`removeAttributeNode` (en-US)	-

Specifiche

DOM Level 2 Core: setAttribute (introduced in DOM Level 1 Core)
HTML5: APIs in HTML documents

Compatibilità con i browser

BCD tables only load in the browser

Gecko notes

L'utilizzo di setAttribute() per modificare determinati attributi, in particolare value 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 Element.value anziché Element.setAttribute().