HTML DOM setAttribute() Methode
❮ Das Element-ObjektBeispiel
Fügen Sie das Klassenattribut mit dem Wert „democlass“ zu einem <h1>-Element hinzu:
document.getElementsByTagName("H1")[0].setAttribute("class", "democlass");
Vor dem Setzen des Attributs:
Hello World
Nach dem Setzen des Attributs:
Hello World
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die Methode setAttribute() fügt einem Element das angegebene Attribut hinzu und gibt ihm den angegebenen Wert.
Wenn das angegebene Attribut bereits existiert, wird nur der Wert gesetzt/geändert.
Hinweis: Obwohl es mit dieser Methode möglich ist, das style-Attribut mit einem Wert zu einem Element hinzuzufügen, wird empfohlen, dass Sie stattdessen die Eigenschaften des Style-Objekts für das Inline-Styling verwenden, da dies andere CSS-Eigenschaften, die möglicherweise in angegeben sind, nicht überschreibt das style-Attribut:
Schlecht:
element.setAttribute("style", "background-color: red;");
Gut:
element.style.backgroundColor = "red";
Tipp: Verwenden Sie die Methode removeAttribute() , um ein Attribut aus einem Element zu entfernen.
Tipp: Siehe auch die Methode setAttributeNode() .
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Verfahren vollständig unterstützt.
| Method | |||||
|---|---|---|---|---|---|
| setAttribute() | Yes | 8.0 | Yes | Yes | Yes |
Syntax
element.setAttribute(attributename, attributevalue)
Parameterwerte
| Parameter | Type | Description |
|---|---|---|
| attributename | String | Required. The name of the attribute you want to add |
| attributevalue | String | Required. The value of the attribute you want to add |
Technische Details
| Rückgabewert: | Kein Rückgabewert |
|---|---|
| DOM-Version | Elementobjekt der Kernebene 1 |
Mehr Beispiele
Beispiel
Ändern Sie ein Eingabefeld in eine Eingabeschaltfläche:
document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");
Vor dem Setzen des Attributs:
Nach dem Setzen des Attributs:
Beispiel
Fügen Sie einem <a>-Element ein href-Attribut mit dem Wert „www.w3schools.com“ hinzu:
document.getElementById("myAnchor").setAttribute("href", "https://www.w3schools.com");
Vor dem Setzen des Attributs:
Nach dem Setzen des Attributs:
Beispiel
Finden Sie heraus, ob ein <a>-Element ein Zielattribut hat. Wenn ja, ändern Sie den Wert des target-Attributs in „_self“:
// Get the <a> element with id="myAnchor"
var x = document.getElementById("myAnchor");
// If the <a> element has a target attribute, set the value to "_self"
if (x.hasAttribute("target")) {
x.setAttribute("target", "_self");
}
Verwandte Seiten
HTML-Tutorial: HTML-Attribute
HTML-DOM-Referenz: getAttribute()-Methode
HTML-DOM-Referenz: hasAttribute()-Methode
HTML-DOM-Referenz: Methode removeAttribute()
❮ Das Element-Objekt