id

Das id globale Attribut definiert eine Kennung (ID), die im gesamten Dokument eindeutig sein muss.

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 #696969;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 2px 2px 1px black;
}

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

Beschreibung

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

Elemente mit ID-Attributen sind als globale Eigenschaften verfügbar. Der Eigenschaftsname ist das ID-Attribut, und der Eigenschaftswert ist das Element. Zum Beispiel, wenn wie folgt markiert:

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

Könnten Sie auf das Paragraphen-Element in JavaScript mit Code wie diesem zugreifen:

js
const content = window.preamble.textContent;

Syntax

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

Technisch gesehen darf der Wert eines ID-Attributs jedes andere Unicode-Zeichen enthalten. Wenn er jedoch in CSS-Selektoren verwendet wird, entweder von JavaScript mit APIs wie Document.querySelector() oder in CSS-Stylesheets, müssen die ID-Attributwerte gültige CSS-Bezeichner sein. Das bedeutet, dass, wenn ein ID-Attributwert kein gültiger CSS-Bezeichner ist (zum Beispiel my?id oder 1234), er vor seiner 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 wählen, die gültige CSS-Bezeichner sind, die kein Maskieren erfordern.

Außerdem 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.

Spezifikationen

Specification
HTML
# global-attributes:the-id-attribute-2

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch