HTML-Attribut-Referenz

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

Das Inhaltsattribut ist das Attribut, das Sie vom Inhalt aus festlegen (dem HTML-Code), und Sie können es setzen oder abfragen über element.setAttribute() oder element.getAttribute(). Das Inhaltsattribut ist immer ein String, auch wenn der erwartete Wert eine ganze Zahl sein soll. Um beispielsweise einem <input>-Element ein maxlength von 42 mit dem Inhaltsattribut zuzuweisen, müssen Sie setAttribute("maxlength", "42") für dieses Element aufrufen.

Das IDL-Attribut ist auch als JavaScript-Eigenschaft bekannt. Dies sind die Attribute, die Sie mit JavaScript-Eigenschaften wie element.foo lesen oder setzen können. Das IDL-Attribut verwendet immer (kann aber transformieren) das zugrunde liegende Inhaltsattribut, um einen Wert zurückzugeben, wenn Sie es abrufen, und speichert etwas im Inhaltsattribut, wenn Sie es setzen. Anders ausgedrückt, spiegeln die IDL-Attribute im Wesentlichen die Inhaltsattribute wider.

Meistens geben IDL-Attribute ihre Werte so zurück, wie sie wirklich genutzt werden. Zum Beispiel ist der Standard-type für <input>-Elemente "text", also wenn Sie input.type="foobar", dann wird das <input>-Element vom Typ Text sein (in der Erscheinung und im Verhalten), aber der Wert des "type" Inhaltsattributs wird "foobar" sein. Das type-IDL-Attribut wird jedoch die Zeichenkette "text" zurückgeben.

IDL-Attribute sind nicht immer Zeichenketten; zum Beispiel input.maxlength ist eine Zahl (eine signiert lange Zahl). Beim Verwenden von IDL-Attributen lesen oder setzen Sie Werte des gewünschten Typs, also wird input.maxlength immer eine Nummer zurückgeben und wenn Sie input.maxlength setzen, will es eine Nummer. Wenn Sie einen anderen Typ übergeben, wird er automatisch in eine Nummer konvertiert nach den Standardregeln der JavaScript-Typkonvertierung.

IDL-Attribute können andere Typen widerspiegeln wie unsignierte lange Zahlen, URLs, Booleans usw. Leider gibt es keine klaren Regeln, und das Verhalten der IDL-Attribute in Verbindung mit ihren entsprechenden Inhaltsattributen hängt vom Attribut ab. Meistens wird es den in der Spezifikation festgelegten Regeln folgen, aber manchmal nicht. HTML-Spezifikationen versuchen, dies so entwicklerfreundlich wie möglich zu gestalten, aber aus verschiedenen Gründen (meist historische) verhalten sich einige Attribute merkwürdig (z. B. 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 boolesche Attribute genannt. Wenn ein boolesches Attribut vorhanden ist, ist sein Wert true, und wenn es fehlt, ist sein Wert false.

HTML definiert Einschränkungen für die erlaubten Werte von booleschen Attributen: Wenn das Attribut vorhanden ist, muss sein Wert entweder die leere Zeichenkette sein (Äquivalenz, das Attribut kann einen nicht zugewiesenen Wert haben), oder ein Wert, der eine ASCII-Insensitivsee-Match für den kanonischen Namen des Attributs ist, ohne führende oder nachfolgende Leerzeichen. Die folgenden Beispiele sind gültige Möglichkeiten, ein boolesches Attribut zu markieren:

<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>

Um klar zu sein, die Werte "true" und "false" sind nicht auf booleschen Attributen erlaubt. Um einen falschen Wert anzugeben, muss das Attribut insgesamt weggelassen werden. Diese Einschränkung klärt einige häufige Missverständnisse auf: Bei checked="false" zum Beispiel würde das Attribut checked des Elements als true interpretiert, weil das Attribut vorhanden ist.

Event-Handler-Attribute

Zusätzlich zu den in der Tabelle oben aufgeführten Attributen können globale Event-Handler — wie onclick — auch als Content-Attribute auf allen Elementen angegeben werden.

Alle Event-Handler-Attribute akzeptieren einen String. Der String wird verwendet, um eine JavaScript-Funktion wie function name(/*args*/) {body} zu synthetisieren, wobei name der Name des Attributs ist, und body der Wert des Attributs ist. Der Handler erhält die gleichen Parameter wie das entsprechende JavaScript-Event-Handler-Gegenstück — die meisten Handler erhalten nur einen event-Parameter, während onerror fünf erhält: event, source, lineno, colno, error. Das bedeutet, dass Sie im Allgemeinen die event-Variable 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