HTML-Attributreferenz

Attributliste

Inhalt versus IDL-Attribute

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

Das Inhaltsattribut ist das Attribut, wie Sie es im Inhalt (dem HTML-Code) setzen können, und Sie können es über element.setAttribute() oder element.getAttribute() setzen oder abfragen. Das Inhaltsattribut ist immer ein String, selbst wenn der erwartete Wert eine Ganzzahl sein sollte. Um beispielsweise das maxlength eines <input>-Elements auf 42 zu setzen, müssen Sie setAttribute("maxlength", "42") auf diesem Element verwenden.

Das IDL-Attribut ist auch als JavaScript-Eigenschaft bekannt. Diese Attribute können Sie über JavaScript-Eigenschaften wie element.foo lesen oder setzen. Das IDL-Attribut wird immer das zugrunde liegende Inhaltsattribut verwenden (es könnte es transformieren, um einen Wert zurückzugeben, wenn Sie es abfragen) und es wird etwas im Inhaltsattribut speichern, wenn Sie es setzen. Mit anderen Worten, die IDL-Attribute reflektieren im Wesentlichen die Inhaltsattribute.

Meistens geben IDL-Attribute ihre Werte so zurück, wie sie tatsächlich verwendet werden. Zum Beispiel ist der Standard-type für <input>-Elemente "text", wenn Sie also input.type="foobar" setzen, wird das <input>-Element vom Typ Text sein (sowohl im Aussehen als auch im Verhalten), aber der Wert des Inhaltsattributs "type" wird "foobar" sein. Das type IDL-Attribut jedoch wird die Zeichenfolge "text" zurückgeben.

IDL-Attribute sind nicht immer Strings; zum Beispiel ist input.maxlength eine Zahl (ein signed long). Wenn Sie IDL-Attribute verwenden, lesen oder setzen Sie Werte des gewünschten Typs, sodass input.maxlength immer eine Zahl zurückgeben wird und beim Setzen von input.maxlength eine Zahl erwartet wird. Wenn Sie einen anderen Typ übergeben, wird er gemäß den standardmäßigen JavaScript-Regeln zur Typkonvertierung automatisch in eine Zahl umgewandelt.

IDL-Attribute können andere Typen widerspiegeln wie unsigned long, URLs, Booleans usw. Leider gibt es keine klaren Regeln und die Art und Weise, wie IDL-Attribute in Verbindung mit ihren entsprechenden Inhaltsattributen verhalten, ist vom Attribut abhängig. Meistens werden die in der Spezifikation festgelegten Regeln befolgt, manchmal jedoch nicht. Die HTML-Spezifikationen versuchen, dies so entwicklerfreundlich wie möglich zu gestalten, aber aus verschiedenen Gründen (meist historisch bedingt) verhalten sich einige Attribute merkwürdig (select.size zum Beispiel) 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, ist sein Wert true, und wenn es fehlt, ist sein Wert false.

HTML definiert Einschränkungen bezüglich der erlaubten Werte von booleschen Attributen: Wenn das Attribut vorhanden ist, muss sein Wert entweder der leere String sein (gleichbedeutend damit, dass dem Attribut kein Wert zugewiesen wurde), oder ein Wert, der in der ASCII-Zeichenweise für den kanonischen Namen des Attributs unempfindlich ist, ohne führende oder abschließende 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 klarzustellen: Die Werte "true" und "false" sind bei booleschen Attributen nicht erlaubt. Um einen falschen Wert darzustellen, muss das Attribut vollständig weggelassen werden. Diese Einschränkung beseitigt einige häufige Missverständnisse: Bei checked="false" zum Beispiel würde das checked-Attribut des Elements als true interpretiert, weil das Attribut vorhanden ist.

Ereignis-Handler-Attribute

<div onclick="console.log(new URL(location))">Schlechtes Beispiel</div>

function onclick(event) {
  with (this.ownerDocument) {
    with (this) {
      console.log(new URL(location)); // 'URL' verweist jetzt auf document.URL statt auf window.URL
      // TypeError: URL ist kein Konstruktor
    }
  }
}

Neben den in der obigen Tabelle aufgelisteten Attributen können globale Ereignis-Handler — wie onclick — auch als Inhaltsattribute auf allen Elementen angegeben werden.

Alle Ereignis-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 dieselben Parameter wie sein JavaScript-Ereignis-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