Element: setAttribute() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die setAttribute() Methode des Element Interface setzt den Wert eines Attributs am angegebenen Element. Existiert das Attribut bereits, 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 (wie etwa beim Klonen von einem anderen Element) arbeiten müssen, bevor Sie ihn hinzufügen, können Sie stattdessen die Methode setAttributeNode() 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 einem 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 gelten als true, wenn sie überhaupt auf dem 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 das Angeben von null nicht unbedingt zu dem erwarteten Ergebnis. Anstatt das Attribut zu entfernen oder seinen Wert auf null zu setzen, setzt es stattdessen den Wert des Attributs auf den String "null". Wenn Sie ein Attribut entfernen möchten, rufen Sie removeAttribute() auf.

Rückgabewert

Keiner (undefined).

Ausnahmen

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

Beispiele

Im folgenden Beispiel wird setAttribute() verwendet, um Attribute auf einem

HTML

html

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 die Änderung des name Attributwerts auf "helloButton". Sie können dies mit dem Seiteninspektor Ihres Browsers überprüfen (Chrome, Edge, Firefox, Safari).
Um den Wert eines Booleschen Attributs zu setzen, wie zum Beispiel disabled, können Sie jeden Wert angeben. Ein leerer String oder der Name des Attributs sind empfohlene Werte. Entscheidend ist lediglich, dass, falls das Attribut überhaupt vorhanden ist, unabhängig von seinem tatsächlichen Wert, sein Wert als true betrachtet wird. Das Fehlen des Attributs bedeutet, dass sein Wert false ist. Indem wir den Wert des disabled Attributs auf den leeren String ("") setzen, setzen wir disabled auf true, was dazu führt, dass der Button deaktiviert wird.

Spezifikationen

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