HTML -ID-Attribut
Das HTML id-Attribut wird verwendet, um eine eindeutige ID für ein HTML-Element anzugeben.
Sie können nicht mehr als ein Element mit derselben ID in einem HTML-Dokument haben.
Verwenden des id-Attributs
Das idAttribut gibt eine eindeutige ID für ein HTML-Element an. Der Wert des id
Attributs muss innerhalb des HTML-Dokuments eindeutig sein.
Das idAttribut wird verwendet, um auf eine bestimmte Stildeklaration in einem Stylesheet zu verweisen. Es wird auch von JavaScript verwendet, um auf das Element mit der spezifischen ID zuzugreifen und es zu manipulieren.
Die Syntax für die ID lautet: Schreiben Sie ein Hash-Zeichen (#), gefolgt von einem ID-Namen. Definieren Sie dann die CSS-Eigenschaften in geschweiften Klammern {}.
Im folgenden Beispiel haben wir ein <h1>Element, das auf den ID-Namen „myHeader“ zeigt. Dieses <h1>
Element wird gemäß der #myHeader
Stildefinition im Head-Bereich gestylt:
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>
Hinweis: Beim ID-Namen wird zwischen Groß- und Kleinschreibung unterschieden!
Hinweis: Der ID-Name muss mindestens ein Zeichen enthalten, darf nicht mit einer Zahl beginnen und darf keine Leerzeichen (Leerzeichen, Tabulatoren usw.) enthalten.
Unterschied zwischen Klasse und ID
Ein Klassenname kann von mehreren HTML-Elementen verwendet werden, während ein ID-Name nur von einem HTML-Element innerhalb der Seite verwendet werden darf:
Beispiel
<style>
/* Style the element with the id "myHeader"
*/
#myHeader {
background-color: lightblue;
color: black;
padding:
40px;
text-align: center;
}
/* Style all
elements with the class name "city" */
.city
{
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My
Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Tipp: In unserem CSS-Tutorial erfahren Sie noch viel mehr über CSS .
HTML-Lesezeichen mit ID und Links
HTML-Lesezeichen werden verwendet, um es Lesern zu ermöglichen, zu bestimmten Teilen einer Webseite zu springen.
Lesezeichen können nützlich sein, wenn Ihre Seite sehr lang ist.
Um ein Lesezeichen zu verwenden, müssen Sie es zuerst erstellen und ihm dann einen Link hinzufügen.
Wenn dann auf den Link geklickt wird, scrollt die Seite zu der Stelle mit dem Lesezeichen.
Beispiel
Erstellen Sie zunächst ein Lesezeichen mit dem idAttribut:
<h2 id="C4">Chapter 4</h2>
Fügen Sie dann auf derselben Seite einen Link zum Lesezeichen hinzu ("Jump to Chapter 4"):
Beispiel
<a href="#C4">Jump to Chapter 4</a>
Oder fügen Sie von einer anderen Seite einen Link zum Lesezeichen hinzu ("Jump to Chapter 4"):
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Verwenden des id-Attributs in JavaScript
Das idAttribut kann auch von JavaScript verwendet werden, um einige Aufgaben für dieses spezifische Element auszuführen.
getElementById()JavaScript kann mit der Methode auf ein Element mit einer bestimmten ID zugreifen :
Beispiel
Verwenden Sie das idAttribut, um Text mit JavaScript zu manipulieren:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Tipp: Lernen Sie JavaScript im HTML-JavaScript- Kapitel oder in unserem JavaScript-Tutorial .
Kapitelzusammenfassung
- Das
idAttribut wird verwendet, um eine eindeutige ID für ein HTML-Element anzugeben - Der Wert des
idAttributs muss innerhalb des HTML-Dokuments eindeutig sein - Das
idAttribut wird von CSS und JavaScript verwendet, um ein bestimmtes Element zu formatieren/auszuwählen - Beim Wert des
idAttributs wird zwischen Groß- und Kleinschreibung unterschieden - Das
idAttribut wird auch verwendet, um HTML-Lesezeichen zu erstellen getElementById()JavaScript kann mit der Methode auf ein Element mit einer bestimmten ID zugreifen