HTML-Attributreferenz

Attributliste

Inhaltsattribute im Vergleich zu IDL-Attributen

In HTML haben die meisten Attribute zwei Seiten: das Inhaltsattribut und das IDL-Attribut (Interface Definition Language).

Das Inhaltsattribut ist das Attribut, wie Sie es im Inhalt (dem HTML-Code) festlegen, und Sie können es über element.setAttribute() festlegen oder über element.getAttribute() abrufen. Das Inhaltsattribut ist immer ein String, selbst wenn der erwartete Wert eine ganze Zahl sein sollte. Um beispielsweise das maxlength eines <input>-Elements mithilfe des Inhaltsattributs auf 42 festzulegen, müssen Sie für dieses Element setAttribute("maxlength", "42") aufrufen.

Das IDL-Attribut wird auch als JavaScript-Eigenschaft bezeichnet. Dies sind die Attribute, die Sie mithilfe von JavaScript-Eigenschaften wie element.foo lesen oder festlegen können. Das IDL-Attribut verwendet immer das zugrunde liegende Inhaltsattribut (kann es aber transformieren), um beim Abrufen einen Wert zurückzugeben, und speichert beim Festlegen etwas im Inhaltsattribut. Anders ausgedrückt: IDL-Attribute spiegeln im Wesentlichen die Inhaltsattribute wider.

Meistens geben IDL-Attribute ihre Werte so zurück, wie sie tatsächlich verwendet werden. Beispielsweise ist der Standardwert für type bei <input>-Elementen „text“. Wenn Sie also input.type="foobar" festlegen, hat das <input>-Element den Typ text (in Aussehen und Verhalten), aber der Wert des Inhaltsattributs „type“ lautet „foobar“. Das IDL-Attribut type gibt jedoch den String „text“ zurück.

IDL-Attribute sind nicht immer Strings; beispielsweise ist input.maxlength eine Zahl (ein vorzeichenbehaftetes long). Bei der Verwendung von IDL-Attributen lesen oder setzen Sie Werte des gewünschten Typs. Daher gibt input.maxlength immer eine Zahl zurück, und wenn Sie input.maxlength festlegen, erwartet es eine Zahl. Wenn Sie einen anderen Typ übergeben, wird dieser gemäß den Standardregeln von JavaScript für die Typkonvertierung automatisch in eine Zahl konvertiert.

IDL-Attribute können andere Typen widerspiegeln, etwa unsigned long, URLs, boolesche Werte usw. Leider gibt es keine klaren Regeln, und das Verhalten von IDL-Attributen in Verbindung mit ihren entsprechenden Inhaltsattributen hängt vom jeweiligen Attribut ab. Meistens folgen sie den in der Spezifikation festgelegten Regeln, manchmal jedoch nicht. HTML-Spezifikationen versuchen, dies so entwicklerfreundlich wie möglich zu gestalten, aber aus verschiedenen Gründen (meist historischen) verhalten sich einige Attribute ungewöhnlich (zum Beispiel select.size), und Sie sollten die Spezifikationen lesen, um genau zu verstehen, wie sie sich verhalten.

Boolesche Attribute

Einige Inhaltsattribute (z. B. required, readonly, disabled) werden als boolesche Attribute bezeichnet. Wenn ein boolesches Attribut vorhanden ist, lautet sein Wert true, und wenn es fehlt, lautet sein Wert false.

HTML definiert Einschränkungen für die zulässigen Werte boolescher Attribute: Wenn das Attribut vorhanden ist, muss sein Wert entweder der leere String sein (gleichwertig damit, dass dem Attribut kein Wert zugewiesen ist) oder ein Wert, der ohne Berücksichtigung der Groß- und Kleinschreibung in ASCII mit dem kanonischen Namen des Attributs übereinstimmt und keinen vorangestellten oder nachgestellten Whitespace enthält. Die folgenden Beispiele sind gültige Möglichkeiten, ein boolesches Attribut auszuzeichnen:

<div itemscope>This is valid HTML but invalid XML.</div>
<div itemscope=itemscope>This is also valid HTML but invalid XML.</div>
<div itemscope="">This is valid HTML and also valid XML.</div>
<div itemscope="itemscope">
  This is also valid HTML and XML, but perhaps a bit verbose.
</div>

Zur Klarstellung: Die Werte "true" und "false" sind für boolesche Attribute nicht zulässig. Um einen falschen Wert darzustellen, muss das Attribut vollständig weggelassen werden. Diese Einschränkung räumt einige häufige Missverständnisse aus: Bei checked="false" würde beispielsweise das Attribut checked des Elements als true interpretiert, weil das Attribut vorhanden ist.

Attribute für Event-Handler

<div onclick="console.log(new URL(location))">Bad Example</div>

function onclick(event) {
  with (this.ownerDocument) {
    with (this) {
      console.log(new URL(location)); // 'URL' now resolves to document.URL instead of window.URL
      // TypeError: URL is not a constructor
    }
  }
}

Zusätzlich zu den in der obigen Tabelle aufgeführten Attributen können globale Event-Handler — wie beispielsweise onclick — auch als Inhaltsattribute für alle Elemente angegeben werden.

Alle Event-Handler-Attribute akzeptieren einen String. Der String wird verwendet, um eine JavaScript-Funktion wie function name(/*args*/) {body} zu erzeugen, wobei name der Name des Attributs und body der Wert des Attributs ist. Der Handler erhält dieselben Parameter wie sein JavaScript-Event-Handler-Gegenstück — die meisten Handler erhalten nur einen Parameter event, während onerror fünf erhält: event, source, lineno, colno, error. Dies bedeutet, dass Sie die Variable event im Allgemeinen innerhalb des Attributs verwenden können.

<div onclick="console.log(event)">Click me!</div>
<!-- The synthesized handler has a name; you can reference itself -->
<div onclick="console.log(onclick)">Click me!</div>

Siehe auch

• HTML-Elemente