HTML-id-Attribut

HTML id Das Attribut wird verwendet, um HTML-Elementen eine eindeutige ID zuzuweisen.

In einem HTML-Dokument dürfen keine mehrere Elemente mit gleicher ID vorhanden sein.

Verwendung des id-Attributs

id Das Attribut spezifiziert die eindeutige ID eines HTML-Elements. id Der Wert des Attributs muss im HTML-Dokument eindeutig sein.

id Das Attribut wird verwendet, um auf spezifische Styladeklarationen in einer Stilübersicht zu verweisen. JavaScript kann es ebenfalls verwenden, um auf und zu Elementen mit einem bestimmten ID zuzugreifen und sie zu verändern.

Die Syntax von 'id' ist: Ein Raute (#) gefolgt von einem Namen für den ID. Anschließend werden die CSS-Eigenschaften in Klammern { } definiert.

Beispiel haben wir <h1> Element, das auf den id-Namen "myHeader" verweist. In diesem <h1> Das Element wird basierend auf dem #myHeader Stile werden durch Style-Definitionen gesetzt:

Beispiel

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>

Probieren Sie es selbst aus

Anmerkung:ID-Namen sind auf Groß- und Kleinschreibung empfindlich!

Anmerkung:Ein id muss mindestens ein Zeichen enthalten und darf keine Leerzeichen (Leerzeichen, Tabulatoren usw.) enthalten.

Unterschied zwischen Klasse und ID

Eine Klasse kann von mehreren HTML-Elementen verwendet werden, während ein id-Namen nur von einem HTML-Element auf der Seite verwendet werden kann:

Beispiel

<style>
/* Stile für das Element mit dem id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* Stile für alle Elemente mit der Klasse "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- Elemente mit einem einzigartigen id -->
<h1 id="myHeader">My Cities</h1>
<!-- Elemente mit der gleichen Klassename -->
<h2 class="city">London</h2>
<p>London ist die Hauptstadt von England.</p>
<h2 class="city">Paris</h2>
<p>Paris ist die Hauptstadt von Frankreich.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo ist die Hauptstadt von Japan.</p>

Probieren Sie es selbst aus

Hinweis:Bitte besuchen Sie unsere CSS-Tutorial Erfahren Sie mehr über CSS.

HTML-Lesezeichen durch ID und Link umgesetzt

HTML-Lesezeichen ermöglichen es dem Leser, zu bestimmten Teilen der Webseite zu springen.

Wenn die Seite sehr lang ist, kann ein Lesezeichen sehr nützlich sein.

Um ein Lesezeichen zu verwenden, müssen Sie es zunächst erstellen und dann einen Link hinzufügen.

Dann wird die Seite gescrollt, wenn Sie auf den Link klicken, zum Ort mit dem Lesezeichen.

Beispiel

Zunächst, mit}} id Attribut zum Erstellen von Lesezeichen:

<h2 id="C4">Kapitel 4</h2>

Fügen Sie dann auf derselben Seite einen Link zu diesem Lesezeichen hinzu ("Springen Sie zum Kapitel 4"):

Beispiel

<a href="#C4">Springen Sie zum Kapitel 4</a>

Probieren Sie es selbst aus

Oder fügen Sie auf einer anderen Seite einen Link zu diesem Lesezeichen hinzu ("Springen Sie zum Kapitel 4"):

<a href="html_demo.html#C4">Springen Sie zum Kapitel 4</a>

Das id-Attribut in JavaScript verwenden

JavaScript kann auch das id-Attribut verwenden, um bestimmte Elemente auszuführen.

JavaScript kann verwendet werden getElementById() Methode zum Zugriff auf Elemente mit bestimmten id:

Beispiel

Verwenden Sie das id-Attribut, um Text mit JavaScript zu verarbeiten:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

Probieren Sie es selbst aus

Hinweis:Bitte HTML-JavaScript diesem Kapitel oder in unseren JavaScript-Tutorial in diesem Kapitel lernen.

Zusammenfassung dieses Kapitels

  • id Das Attribut wird verwendet, um HTML-Elementen einen eindeutigen id zuweisen
  • id Der Attributwert muss im HTML-Dokument einzigartig sein
  • CSS und JavaScript können verwendet werden id Das Attribut wird verwendet, um Elemente auszuwählen oder den Stil eines bestimmten Elements festzulegen
  • id Der Attributwert ist大小写敏感
  • id Der Attributwert kann auch zum Erstellen von HTML Lesezeichen verwendet werden
  • JavaScript kann verwendet werden getElementById() Methode zum Zugriff auf Elemente mit bestimmten id