Wie füge ich einem HTML-Element ein Attribut mit JavaScript hinzu / aktualisiere es?

127

Ich versuche einen Weg zu finden, wie Attribute mithilfe von JavaScript hinzugefügt / aktualisiert werden können. Ich weiß, dass ich es mit setAttribute()Funktion machen kann, aber das funktioniert im IE nicht.

javascript html cross-browser Entwickler
quelle

Antworten:

163

Sie können hier über das Verhalten von Attributen in vielen verschiedenen Browsern, einschließlich IE, lesen .

element.setAttribute()sollte den Trick machen, auch im IE. Hast Du es versucht? Wenn es nicht funktioniert, element.attributeName = 'value'funktioniert es möglicherweise.

und ich
quelle
5
das funktioniert. Es erstellt ein Attribut, wenn es nicht vorhanden ist, und aktualisiert es, wenn es vorhanden ist. Ist dies irgendwo dokumentiert, soweit dies funktioniert?
dev.e.loper
@ dev.e.loper DOM-Spezifikation ist ein guter Anfang: w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/…
Valentinas
1
Wenn ich Folgendes mache: document.getElementById("nav").setAttribute("class", "active");Es funktioniert in der Chrome JS-Konsole, aber auf der eigentlichen Seite funktioniert es nicht. Irgendwelche Ideen? Übrigens füge ich auf der eigentlichen Seite die .jsDatei vor dem Ende des bodyBereichs ein.
bekanntasilya
36

Was einfach erscheint, ist tatsächlich schwierig, wenn Sie vollständig kompatibel sein möchten.

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

Angenommen, Sie müssen die ID 'div1' hinzufügen. 

e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')
Diese funktionieren alle mit Ausnahme des letzten in IE 5.5 (das zu diesem Zeitpunkt eine alte Geschichte ist, aber immer noch die Standardeinstellung von XP ohne Updates ist).

Aber es gibt natürlich Eventualitäten. Funktioniert nicht im IE vor 8: e.attributes['style'] Wird nicht fehlerhaft sein, setzt aber die Klasse nicht tatsächlich, es muss className sein : e['class'].
Wenn Sie jedoch Attribute verwenden, funktioniert dies:e.attributes['class']

Stellen Sie sich Attribute zusammenfassend als wörtlich und objektorientiert vor.

Im wahrsten Sinne des Wortes möchten Sie nur, dass es x = 'y' ausspuckt und nicht darüber nachdenkt. Dafür sind die Attribute setAttribute und createAttribute vorgesehen (mit Ausnahme der Stilausnahme des IE). Aber weil dies wirklich Objekte sind, können die Dinge verwirrt werden.

Da Sie sich die Mühe machen, ein DOM-Element anstelle des jQuery innerHTML-Slops ordnungsgemäß zu erstellen, würde ich es wie eines behandeln und bei e.className = 'fooClass' und e.id = 'fooID' bleiben. Dies ist eine Designpräferenz, aber in diesem Fall ist der Versuch, etwas anderes als ein Objekt zu behandeln, gegen Sie.

Es wird niemals wie bei den anderen Methoden nach hinten losgehen. Beachten Sie nur, dass class className und style ein Objekt ist, also style.width not style = "width: 50px". Denken Sie auch an tagName, aber dies wird bereits von createElement festgelegt, sodass Sie sich darüber keine Gedanken machen müssen.

Dies war länger als ich wollte, aber die CSS-Manipulation in JS ist eine heikle Angelegenheit.

JPearce
quelle
5
Windows XP ging mit IE6 aus, nicht mit 5.5. Das wäre schrecklich.
mgol
Dies funktioniert mit id, nicht mit etwas anderem wiedata-toggle
StallingOne
30

Obligatorische jQuery-Lösung . Findet das titleAttribut und setzt es auf foo. Beachten Sie, dass dies ein einzelnes Element auswählt, da ich es anhand der ID ausführe. Sie können jedoch problemlos dasselbe Attribut für eine Sammlung festlegen, indem Sie den Selektor ändern.

$('#element').attr( 'title', 'foo' );
Tvanfosson
quelle
3
+1 für jQuery-Lösung. In meinem Fall habe ich versucht, jQuery zu vermeiden und es aufgrund der Anforderungen meiner Arbeit in reinem Javascript zu produzieren. Ich bin froh, dass beide Antworten existieren. Vielen Dank.
NuclearPeon
7

Was möchten Sie mit dem Attribut tun? Ist es ein HTML-Attribut oder etwas Eigenes?

Meistens können Sie es einfach als Eigenschaft adressieren: Möchten Sie einen Titel für ein Element festlegen? element.title = "foo"werde es tun.

Für Ihre eigenen benutzerdefinierten JS-Attribute ist das DOM natürlich erweiterbar (auch bekannt als expando = true). Das einfache Ergebnis ist, dass Sie element.myCustomFlag = fooes ohne Probleme ausführen und anschließend lesen können.

Annakata
quelle