So verwenden Sie setAttribute in JavaScript

Wir müssen Element in JavaScript häufig dynamisch hinzufügen. Dies kann durch die Verwendung von setAttribute() erreicht werden, was Probleme mit der Browserkompatibilität mit sich bringt.

setAttribute(string name, string value): Fügen Sie ein neues Attribut mit einem angegebenen Namen und Wert hinzu oder setzen Sie ein vorhandenes Attribut auf einen angegebenen Wert.

1. Stilprobleme

Die Klasse in setAttribute("class", value) bezieht sich auf die Änderung des Attributs "class" und muss daher in Anführungszeichen gesetzt werden.

vName stellt die Zuweisung eines Werts zum Stil dar.

Zum Beispiel:

var input = document.createElement("input");

input.setAttribute("type", "text");

input.setAttribute("name", "q");

input.setAttribute("class",bordercss);

Bei der Ausgabe: , das heißt, das Eingabesteuerelement verfügt über Bordercss-Stilattribute

Hinweis: Das Klassenattribut spielt im W3C DOM eine sehr wichtige Rolle, existiert aber aufgrund von Browserunterschieden immer noch .

Die Verwendung der setAttribute("class", vName)-Anweisung zum dynamischen Festlegen des Klassenattributs von Element funktioniert in Firefox, jedoch nicht im IE. Da der Browser, der den IE-Kern verwendet, „class“ nicht erkennt, muss er stattdessen „className“ verwenden.

Ebenso erkennt Firefox auch „className“ nicht. Die häufig verwendete Methode besteht also darin, beides zu verwenden:

element.setAttribute("class", value); //für Firefox

element.setAttribute("className", value); für IE

2. Methodenattribute und andere Probleme

Zum Beispiel:

var bar = document.getElementById("testbt");

bar.setAttribute("onclick", "javascript:alert('This is a test!');");

Hier verwenden wir setAttribute, um das onclick-Attribut von e anzugeben, was einfach ist und leicht zu verstehen.

Der IE unterstützt dies jedoch nicht, aber er unterstützt nicht die Verwendung von setAttribute zum Festlegen bestimmter Attribute, z. B. Objektattribute, Sammlungsattribute und Ereignisattribute Mit anderen Worten: Verwenden von setAttribute zum Festlegen von Stil und Onclick. Diese Eigenschaften funktionieren im IE nicht.

Um Kompatibilität mit verschiedenen Browsern zu erreichen, können Sie die Punktnotation verwenden, um die Objekteigenschaften, Sammlungseigenschaften und Ereigniseigenschaften von Element festzulegen.

document.getElementById("testbt").className = "bordercss";

document.getElementById("testbt").style.cssText = "color: #00f;";

document.getElementById("testbt").style.color = "#00f";

document.getElementById("testbt").onclick= function () { warning("Dies ist ein Test !"); }