Wie füge ich mit JavaScript ein Attribut zu einem HTML-Element hinzu / aktualisiere es?
Ich versuche einen Weg zu finden, das Attribut mit JavaScript hinzuzufügen/zu aktualisieren. Ich weiß, dass ich es mit der Funktion setAttribute() machen kann, aber das funktioniert im IE nicht.
Sie können hier über das Verhalten von Attributen in vielen verschiedenen Browsern lesen, einschließlich IE.
element.setAttribute() sollte den Trick auch im IE machen. Hast Du es versucht? Wenn es nicht funktioniert, dann vielleicht element.attributeName = 'value' könnte funktionieren.
Was einfach zu sein scheint, ist tatsächlich schwierig, wenn Sie vollständig kompatibel sein möchten.
var e = document.createElement('div');Nehmen wir an, Sie müssen eine ID von 'div1' hinzufügen.
e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')Aber es gibt natürlich Eventualitäten. Funktioniert nicht in IE vor 8: e.attributes['style'] Gibt keinen Fehler aus, setzt die Klasse jedoch nicht, es muss className sein: e['class'].
Wenn Sie jedoch Attribute verwenden, funktioniert dies: e.attributes['class']
Zusammenfassend können Sie sich Attribute als wörtlich und objektorientiert vorstellen.
Im wahrsten Sinne des Wortes soll es nur x = 'y' ausspucken und nicht darüber nachdenken. Dafür gibt es die Attribute setAttribute und createAttribute (mit Ausnahme der IE-Stilausnahme). Aber weil dies wirklich Objekte sind, kann es zu Verwirrung kommen.
Da Sie sich die Mühe machen, ein DOM-Element anstelle von jQuery innerHTML slop richtig zu erstellen, würde ich es wie eines behandeln und bei e.className = 'fooClass' und e.id = 'fooID' bleiben. Dies ist eine Entwurfspräferenz, aber in diesem Fall arbeitet der Versuch, etwas anderes als ein Objekt zu behandeln, gegen Sie.
Es wird auf Sie niemals zurückschlagen, wie es bei den anderen Methoden der Fall sein könnte. Beachten Sie lediglich, dass class className und style ein Objekt ist, sodass style.width nicht style = "width: 50px" ist. Denken Sie auch an tagName, aber dies ist bereits von createElement festgelegt, sodass Sie sich darüber keine Sorgen machen sollten.
Das war länger als ich wollte, aber CSS-Manipulation in JS ist schwierig.
Obligatorisch jQuery-Lösung . Sucht und setzt das title Attribut auf foo. Beachten Sie, dass hierdurch ein einzelnes Element ausgewählt wird, da ich es anhand der ID ausführe. Sie können jedoch problemlos dasselbe Attribut für eine Auflistung festlegen, indem Sie den Selektor ändern.
$('#element').attr( 'title', 'foo' );
Was möchten Sie mit dem Attribut tun? Handelt es sich um ein HTML-Attribut oder um etwas Eigenes?
Meistens können Sie es einfach als Eigenschaft ansprechen: Möchten Sie einen Titel für ein Element festlegen? element.title = "foo" Wird es tun.
Für Ihre eigenen benutzerdefinierten JS-Attribute ist das DOM natürlich erweiterbar (alias expando = true). Das einfache Fazit ist, dass Sie element.myCustomFlag = foo Ausführen und anschließend ohne Probleme lesen können.