Come aggiungere / aggiornare un attributo a un elemento HTML utilizzando JavaScript?

128

Sto cercando di trovare un modo per aggiungere / aggiornare l'attributo utilizzando JavaScript. So che posso farlo con la setAttribute()funzione ma che non funziona in IE.

javascript html cross-browser

— sviluppatore
fonte

163

Puoi leggere qui sul comportamento degli attributi in molti browser diversi, incluso IE.

element.setAttribute()dovrebbe fare il trucco, anche in IE. Hai provato? Se non funziona, forse element.attributeName = 'value'potrebbe funzionare.

— e io
fonte

5

questo funziona. crea l'attributo se non esiste e lo aggiorna se esiste. è documentato da qualche parte per quanto funziona?

— dev.e.loper

@ dev.e.loper Le specifiche DOM sono un buon punto di partenza: w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/…

— valentinas,

1

Quando eseguo le seguenti operazioni: document.getElementById("nav").setAttribute("class", "active");funziona nella console JS di Chrome, ma nella pagina effettiva non funziona ... idee? A proposito, nella pagina attuale includo il .jsfile prima della fine bodydell'ambito.

— knownasilya,

36

Ciò che sembra facile è in realtà complicato se vuoi essere completamente compatibile.

var e = document.createElement('div');

Supponiamo che tu abbia un ID di 'div1' da aggiungere.

e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')

Funzioneranno tutti tranne l'ultimo in IE 5.5 (che è la storia antica a questo punto ma è ancora l'impostazione predefinita di XP senza aggiornamenti).

Ma ci sono contingenze, ovviamente. Non funziona in IE prima di 8: e.attributes['style'] Will not errore, ma non sarà effettivamente impostare la classe, deve essere className: e['class'].
Tuttavia, se stai usando gli attributi, funzionerà:e.attributes['class']

In sintesi, pensa agli attributi come letterali e orientati agli oggetti.

In letterale, vuoi solo che sputi x = 'y' e non ci pensi. Questo è ciò che attributi, setAttribute, createAttribute è (tranne per l'eccezione di stile di IE). Ma poiché questi sono davvero oggetti, le cose possono essere confuse.

Dato che stai per creare correttamente un elemento DOM anziché lo slop jQuery innerHTML, lo tratterei come uno e manterrei con e.className = 'fooClass' ed e.id = 'fooID'. Questa è una preferenza di progettazione, ma in questo caso cercare di trattare è come qualsiasi cosa diversa da un oggetto che funzioni contro di te.

Non si ritorcerà mai contro di te come potrebbero fare gli altri metodi, basta essere consapevoli del fatto che class è className e style è un oggetto, quindi style.width non style = "width: 50px". Ricorda anche tagName ma questo è già impostato da createElement, quindi non dovresti preoccuparti.

Questo è stato più lungo di quanto volessi, ma la manipolazione CSS in JS è un affare complicato.

— JPearce
fonte

5

Windows XP è uscito con IE6, non 5.5. Sarebbe terribile.

— mgol

Funziona con id, non con qualcos'altro comedata-toggle

— stallingOne

30

Soluzione jQuery obbligatoria . Trova e imposta l' titleattributo su foo. Nota che questo seleziona un singolo elemento poiché lo sto facendo per id, ma potresti facilmente impostare lo stesso attributo su una raccolta cambiando il selettore.

$('#element').attr( 'title', 'foo' );

— tvanfosson
fonte

3

+1 per la soluzione jQuery. Nel mio caso, stavo cercando di evitare jQuery e produrlo in javascript puro a causa dei requisiti del mio lavoro. Sono contento che entrambe le risposte esistano. Grazie.

— NuclearPeon,

7

Cosa vuoi fare con l'attributo? È un attributo HTML o qualcosa di tuo?

Il più delle volte puoi semplicemente affrontarlo come una proprietà: vuoi impostare un titolo su un elemento? element.title = "foo"lo farà.

Per i tuoi attributi JS personalizzati il DOM è naturalmente estensibile (aka expando = true), il cui semplice risultato è che puoi fare element.myCustomFlag = fooe successivamente leggerlo senza problemi.

— annakata
fonte