Element: setAttribute()-Methode

Syntax

setAttribute(name, value)

Parameter

name

Ein String, der den Namen des Attributs angibt, dessen Wert festgelegt 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 Wert enthält, der dem Attribut zugewiesen wird. Jeder nicht-string Wert, der angegeben wird, wird automatisch in einen String umgewandelt.

Boolesche Attribute gelten als true, wenn sie überhaupt am Element vorhanden sind. Sie sollten value auf den leeren String ("") oder den Attributnamen setzen, ohne führende oder nachfolgende Leerzeichen. Sehen Sie sich das Beispiel unten für eine praktische Demonstration an.

Da der angegebene value in einen String umgewandelt wird, wird null nicht unbedingt das tun, was Sie erwarten. Anstatt das Attribut zu entfernen oder seinen Wert auf null zu setzen, wird der Attributwert auf den String "null" gesetzt. Wenn Sie ein Attribut entfernen möchten, rufen Sie removeAttribute() auf.

Rückgabewert

Keiner (undefined).

Ausnahmen

InvalidCharacterError DOMException

Wird ausgelöst, wenn der name-Wert kein gültiger XML-Name ist; beispielsweise, 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 <button> zu setzen.

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. Dies können Sie im Seiteninspektor Ihres Browsers sehen (Chrome, Edge, Firefox, Safari).
• Um den Wert eines Booleschen Attributs, wie disabled, festzulegen, können Sie jeden Wert angeben. Ein leerer String oder der Name des Attributs sind empfohlene Werte. Entscheidend ist, dass wenn das Attribut überhaupt vorhanden ist - unabhängig von seinem tatsächlichen Wert - sein Wert als true gilt. Die Abwesenheit 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 ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Element.hasAttribute()
• Element.getAttribute()
• Element.removeAttribute()
• Element.toggleAttribute()