Element: setAttribute()-Methode

Die setAttribute()-Methode des Element-Interfaces legt den Wert eines Attributs des angegebenen Elements fest. Wenn das Attribut bereits existiert, wird der Wert aktualisiert; andernfalls wird ein neues Attribut mit dem angegebenen Namen und Wert hinzugefügt.

Um den aktuellen Wert eines Attributs zu erhalten, verwenden Sie getAttribute(); um ein Attribut zu entfernen, rufen Sie removeAttribute() auf.

Wenn Sie mit dem Attr-Knoten arbeiten müssen (z.B. beim Klonen von einem anderen Element), bevor Sie ihn hinzufügen, können Sie stattdessen die setAttributeNode()-Methode verwenden.

Syntax

setAttribute(name, value)

Parameter

name: Ein String, der den Namen des Attributs angibt, dessen Wert gesetzt werden soll. Der Attributname wird automatisch in Kleinbuchstaben umgewandelt, wenn setAttribute() auf ein HTML-Element in einem HTML-Dokument aufgerufen wird.
value: Ein String, der den dem Attribut zuzuweisenden Wert enthält. Jeder nicht-String-Wert wird automatisch in einen String konvertiert.

Boolesche Attribute werden als true betrachtet, wenn sie überhaupt im Element vorhanden sind. Sie sollten value auf den leeren String ("") oder den Namen des Attributs setzen, ohne führende oder nachfolgende Leerzeichen. Siehe das Beispiel unten für eine praktische Demonstration.

Da der angegebene value in einen String konvertiert wird, führt die Angabe von null nicht unbedingt zu dem gewünschten Ergebnis. Statt das Attribut zu entfernen oder seinen Wert auf null zu setzen, wird der Wert des Attributs stattdessen auf den String "null" gesetzt. Wenn Sie ein Attribut entfernen möchten, rufen Sie removeAttribute() auf.

Rückgabewert

Keiner (undefined).

Ausnahmen

InvalidCharacterError DOMException: Ausgelöst, wenn der Wert von name kein gültiger XML-Name ist; zum Beispiel, wenn er mit einer Zahl, einem Bindestrich oder einem Punkt beginnt oder andere Zeichen als alphanumerische Zeichen, Unterstriche, Bindestriche oder Punkte enthält.

Beispiele

Im folgenden Beispiel wird setAttribute() verwendet, um Attribute auf einem <button> zu setzen.

HTML

html

<button>Hello World</button>

button {
  height: 30px;
  width: 100px;
  margin: 1em;
}

JavaScript

const button = document.querySelector("button");

button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");

Dies demonstriert zwei Dinge:

Der erste Aufruf von setAttribute() oben zeigt, wie der Wert des name-Attributs auf „helloButton“ geändert wird. Sie können dies mit dem Seiteninspektor Ihres Browsers sehen (Chrome, Edge, Firefox, Safari).
Um den Wert eines booleschen Attributs wie disabled festzulegen, können Sie einen beliebigen Wert angeben. Ein leerer String oder der Name des Attributs sind empfohlene Werte. Entscheidend ist nur, ob das Attribut überhaupt vorhanden ist, unabhängig von seinem tatsächlichen Wert, sein Wert wird als true betrachtet. Das Fehlen des Attributs bedeutet, dass sein Wert false ist. Durch Setzen des Wertes des disabled-Attributs auf den leeren String ("") setzen wir disabled auf true, was dazu führt, dass der Button deaktiviert wird.

Spezifikationen

Specification
DOM Standard # ref-for-dom-element-setattribute①

Browser-Kompatibilität

BCD tables only load in the browser