HTML-Attributreferenz

Attributliste

Inhalts- vs. IDL-Attribute

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

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

Das IDL-Attribut, auch bekannt als JavaScript-Eigenschaft, sind die Attribute, die Sie über JavaScript-Eigenschaften wie element.foo lesen oder setzen können. Das IDL-Attribut wird immer das zugrunde liegende Inhaltsattribut verwenden (aber möglicherweise umwandeln), um beim Abrufen einen Wert zurückzugeben, und wird etwas im Inhaltsattribut speichern, wenn Sie es setzen. Mit anderen Worten, die IDL-Attribute spiegeln im Wesentlichen die Inhaltsattribute wider.

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

IDL-Attribute sind nicht immer Strings; beispielsweise ist input.maxlength eine Zahl (ein signierter 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 er automatisch in eine Zahl umgewandelt, wie es die Standard-JavaScript-Regeln für Typumwandlungen vorsehen.

IDL-Attribute können andere Typen widerspiegeln wie unsigned long, URLs, Booleans, etc. Leider gibt es keine klaren Regeln und die Art und Weise, wie IDL-Attribute in Verbindung mit ihren entsprechenden Inhaltsattributen funktionieren, hängt vom Attribut ab. Meistens folgen sie den in der Spezifikation festgelegten Regeln, aber manchmal nicht. HTML-Spezifikationen versuchen, dies so entwicklerfreundlich wie möglich zu gestalten, aber aus verschiedenen Gründen (größtenteils historisch) verhalten sich einige Attribute seltsam (select.size, zum Beispiel) und man sollte 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 zulässigen Werte boolescher Attribute: Wenn das Attribut vorhanden ist, muss sein Wert entweder der leere String sein (gleichbedeutend damit, dass das Attribut keinen zugewiesenen Wert hat), oder ein Wert, der eine ASCII-fallunempfindliche Übereinstimmung mit dem 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 bei booleschen Attributen nicht erlaubt. Um einen false-Wert darzustellen, muss das Attribut vollständig weggelassen werden. Diese Einschränkung klärt einige häufige Missverständnisse auf: Mit checked="false" zum Beispiel würde das checked-Attribut des Elements als true interpretiert, da das Attribut vorhanden ist.

Ereignishandler-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' bezieht sich jetzt auf document.URL statt window.URL
      // TypeError: URL is not a constructor
    }
  }
}

Zusätzlich zu den oben in der Tabelle aufgeführten Attributen können globale Ereignishandler — wie onclick — auch als Inhaltsattribute auf allen Elementen spezifiziert werden.

Alle Ereignishandler-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-Ereignishandler-Gegenstück — die meisten Handler erhalten nur einen event-Parameter, während onerror fünf empfängt: event, source, lineno, colno, error. Das bedeutet, dass Sie im Allgemeinen die Variable event 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