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 pecificato 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>.

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

Specifiche

Compatibilità con i browser

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge ? Firefox ? IE ? Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android ? Opera Android Full support YesSafari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

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().

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: IsibisiDev
Ultima modifica di: IsibisiDev,