id HTML globales Attribut

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 die Leerzeichen Teil der ID wären. Im Gegensatz zum class Attribut, welches durch Leerzeichen getrennte Werte erlaubt, können Elemente nur einen einzelnen ID-Wert haben.

Technisch gesehen kann der Wert eines ID-Attributs jedes andere Unicode-Zeichen enthalten. Wenn dieser jedoch in CSS-Selektoren verwendet wird, sei es von JavaScript mit APIs wie Document.querySelector() oder in CSS-Stylesheets, müssen die Werte des ID-Attributs gültige CSS-Bezeichner sein. Das bedeutet, dass, wenn ein ID-Attributswert kein gültiger CSS-Bezeichner ist (zum Beispiel my?id oder 1234), er vor der Verwendung in einem Selektor entweder mit der CSS.escape() Methode oder manuell maskiert werden muss.

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

Des Weiteren sind nicht alle gültigen ID-Attributswerte auch gültige JavaScript-Bezeichner. Zum Beispiel ist 1234 ein gültiger Attributswert, aber kein gültiger JavaScript-Bezeichner. Das bedeutet, dass der Wert kein gültiger Variablenname ist, und daher kann man nicht mit Code wie window.1234 auf das Element zugreifen. Jedoch kann man es mit window["1234"] erreichen.

Beschreibung

Der Zweck des ID-Attributs ist es, ein einzelnes Element zu identifizieren, wenn es verlinkt (unter Verwendung eines Fragmentbezeichners), gescriptet oder gestylt wird (mit CSS).

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

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

Sie können auf dieses Absatz-Element in JavaScript mit folgendem Code zugreifen:

const content = window.preamble.textContent;

Spezifikationen

Browser-Kompatibilität

Siehe auch

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