HTML id 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-Zeichen für Leerraum enthalten. Browser behandeln nicht konforme IDs, die Leerzeichen enthalten, 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 kann der Wert eines ID-Attributs jedes andere Unicode-Zeichen enthalten. Wenn jedoch in CSS-Selektoren verwendet, entweder von JavaScript aus mit APIs wie Document.querySelector() oder in CSS-Stylesheets, müssen ID-Attributwerte gültige CSS-Bezeichner sein. Das bedeutet, dass wenn ein ID-Attributwert kein gültiger CSS-Bezeichner ist (z. B. my?id oder 1234), er entweder mit der Methode CSS.escape() oder manuell maskiert werden muss, bevor er in einem Selektor verwendet wird.

Aus diesem Grund wird Entwicklern empfohlen, für ID-Attribute Werte zu wählen, die gültige CSS-Bezeichner sind und keine Maskierung 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 mit window["1234"] darauf zugreifen.

Beschreibung

Der Zweck des ID-Attributs ist es, ein einzelnes Element zu identifizieren, wenn es verlinkt (mit einem Fragmentbezeichner), geskriptet oder gestylt (mit CSS) werden soll.

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, für diesen 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 Methode Document.getElementById.
• CSS ID-Selektoren.