Globales HTML-Attribut id

Probieren Sie es aus

<p>A normal, boring paragraph. Try not to fall asleep.</p>

<p id="exciting">The most exciting paragraph on the page. One of a kind!</p>

#exciting {
  background: linear-gradient(to bottom, #ffe8d4, #f69d3c);
  border: 1px solid dimgrey;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 2px 2px 1px black;
}

#exciting::before {
  content: "ℹ️";
  margin-right: 5px;
}

Syntax

Der Wert eines ID-Attributs darf keine ASCII-Leerzeichen enthalten. Browser behandeln nicht konforme IDs, die Leerzeichen enthalten, so, als ob das Leerzeichen Teil der ID wäre. Im Gegensatz zum class-Attribut, das durch Leerzeichen getrennte Werte zulässt, können Elemente nur einen einzigen ID-Wert haben.

Technisch gesehen darf der Wert eines ID-Attributs jedes andere Unicode-Zeichen enthalten. Wenn jedoch in CSS-Selektoren verwendet, entweder aus JavaScript mit APIs wie Document.querySelector() oder in CSS-Stylesheets, müssen ID-Attributwerte gültige CSS-Bezeichner sein. Dies bedeutet, dass ein ID-Attributwert, der kein gültiger CSS-Bezeichner ist (z.B. my?id oder 1234), vor der Verwendung in einem Selektor entweder mit der Methode CSS.escape() oder manuell maskiert werden muss.

Aus diesem Grund wird empfohlen, dass Entwickler Werte für ID-Attribute auswählen, die gültige CSS-Bezeichner sind und kein Maskieren erfordern.

Auch sind nicht alle gültigen ID-Attributwerte gültige JavaScript-Bezeichner. Zum Beispiel ist 1234 ein gültiger Attributwert, aber kein gültiger JavaScript-Bezeichner. Das bedeutet, dass der Wert kein gültiger Variablenname ist, sodass Sie nicht auf das Element mit Code wie window.1234 zugreifen können. Sie können jedoch auf es mit window["1234"] zugreifen.

Beschreibung

Der Zweck des ID-Attributs besteht darin, ein einzelnes Element beim Verlinken (unter Verwendung eines Fragmentbezeichners), beim Skripting oder beim Styling (mit CSS) zu identifizieren.

Sie können auf Elemente mit ID-Attributen als globale Eigenschaften des window-Objekts zugreifen, wobei der Eigenschaftsname der ID-Wert und der Eigenschaftswert das entsprechende Element ist. Zum Beispiel, bei folgendem Markup:

<p id="preamble"></p>

Können Sie auf dieses Absatz-Element in JavaScript mit dem folgenden Code zugreifen:

const content = window.preamble.textContent;

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Alle globalen Attribute.
• Element.id, die dieses Attribut widerspiegelt.
• Die Methode Document.getElementById.
• CSS-ID-Selektoren.