HTML-Attributreferenz

Attributliste

Inhalt versus IDL-Attribute

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

Das Inhaltsattribut ist das Attribut, das Sie aus dem Inhalt (dem HTML-Code) setzen und das Sie über element.setAttribute() oder element.getAttribute() setzen oder abrufen können. Das Inhaltsattribut ist immer ein String, auch wenn der erwartete Wert ein Integer sein sollte. Um zum Beispiel das maxlength eines <input>-Elements auf 42 zu setzen, müssen Sie setAttribute("maxlength", "42") auf diesem Element aufrufen.

Das IDL-Attribut ist auch als JavaScript-Eigenschaft bekannt. Dies sind die Attribute, die Sie lesen oder setzen können, indem Sie JavaScript-Eigenschaften wie element.foo verwenden. 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. Mit anderen Worten spiegeln die IDL-Attribute im Wesentlichen die Inhaltsattribute wider.

Meist geben IDL-Attribute ihre Werte genauso zurück, wie sie tatsächlich verwendet werden. Zum Beispiel ist der Standard-type für <input>-Elemente "text". Wenn Sie input.type="foobar" setzen, wird das <input>-Element vom Typ Text sein (in Erscheinung und Verhalten), aber der Wert des Inhaltsattributs "type" wird "foobar" sein. Das type IDL-Attribut wird jedoch den String "text" zurückgeben.

IDL-Attribute sind nicht immer Strings; zum Beispiel ist input.maxlength eine Zahl (ein signiertes Long). Wenn Sie IDL-Attribute verwenden, lesen oder setzen Sie Werte des gewünschten Typs, daher wird input.maxlength immer eine Zahl zurückgeben, und wenn Sie input.maxlength setzen, erwartet es eine Zahl. Wenn Sie einen anderen Typ übergeben, wird dieser gemäß den Standard-JavaScript-Regeln zur Typkonvertierung automatisch in eine Zahl umgewandelt.

IDL-Attribute können andere Typen widerspiegeln wie unsigniertes Long, URLs, Booleans, usw. Leider gibt es keine klaren Regeln, und die Art und Weise, wie IDL-Attribute im Zusammenhang mit ihren entsprechenden Inhaltsattributen verhalten, hängt vom Attribut ab. Meistens folgen sie den in der Spezifikation festgelegten Regeln, aber manchmal tun sie das nicht. HTML-Spezifikationen versuchen, dies so entwicklerfreundlich wie möglich zu gestalten, aber aus verschiedenen Gründen (meist historischen) verhalten sich einige Attribute seltsam (select.size zum Beispiel), und Sie sollten die Spezifikationen lesen, um zu verstehen, wie sie sich genau verhalten.

Boolesche Attribute

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

HTML definiert Einschränkungen für die erlaubten Werte boolescher Attribute: Wenn das Attribut vorhanden ist, muss sein Wert entweder der leere String sein (gleichbedeutend, das Attribut kann einen nicht zugewiesenen Wert haben) oder ein Wert, der für den kanonischen Namen des Attributs ASCII-ignorerend übereinstimmt, 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 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: Mit checked="false" zum Beispiel würde das Attribut checked des Elements als wahr interpretiert, weil das Attribut vorhanden ist.

Ereignis-Handler-Attribute

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

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

Zusätzlich zu den oben in der Tabelle aufgelisteten Attributen können globale Ereignishandler — 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 und body der Wert des Attributs ist. Der Handler erhält die gleichen 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, Sie können im Allgemeinen die Variable event innerhalb des Attributs verwenden.

<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