HTML id Eigenschaft
- Vorherige Seite hidden
- Nächste Seite inert
- Zurück zur übergeordneten Ebene HTML-Globalattribute
Definition und Verwendung
id
Das Attribut legt den eindeutigen id eines HTML-Elements fest. (Dieser Wert muss im HTML-Dokument eindeutig sein).
id
Das Attribut wird am häufigsten verwendet, um auf Stile in einer Stilvorlage zu verweisen und Elemente mit einem bestimmten id mithilfe von JavaScript (durch HTML DOM) zu manipulieren.
id
Das Attribut kann auch als Linkanker (link anchor) verwendet werden.
Weitere Informationen:
HTML教程:HTML id
HTML教程:HTML Eigenschaften
CSS教程:CSS Syntax
CSS Referenzhandbuch:CSS #id Selektor
HTML DOM Referenzhandbuch:HTML DOM getElementById() Methode
HTML DOM Referenzhandbuch:HTML DOM id-Attribut
HTML DOM Referenzhandbuch:HTML DOM Style Objekt
Beispiel
Beispiel 1
Verwenden Sie das id-Attribut, um ein Textsegment mit JavaScript zu ändern:
<html> <body> <h1 id="myHeader">Hallo Welt!</h1> <button onclick="displayResult()">Text ändern</button> <script> function displayResult() { document.getElementById("myHeader").innerHTML = "Ein schöner Tag!"; } </script> </body> </html>
Mehr Beispiele finden Sie am Ende der Seite.
Syntax
<element id="id">
Attributwert
Wert | Beschreibung |
---|---|
id |
Geben Sie dem Element eine eindeutige id. Benennungsregeln:
|
Mehr Beispiele
Beispiel 2
Verwenden Sie das id-Attribut, um auf ein Element mit einem bestimmten id im Dokument zu verweisen:
<html> <body> <h2><a id="top">Ein Titel</a></h2> <p>Sehr viele Texte ....</p> <p>Sehr viele Texte ....</p> <p>Sehr viele Texte ....</p> <a href="#top">Zurück zum Anfang</a> </body> </html>
Beispiel 3
Verwenden Sie die id-Eigenschaft, um Text mit CSS zu stylen:
<html> <head> <style> #myHeader { color: red; text-align: center; } </style> </head> <body> <h1 id="myHeader">CodeW3C.com ist das Beste!</h1> </body> </html>
Browserkompatibilität
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Unterstützung | Unterstützung | Unterstützung | Unterstützung | Unterstützung |
- Vorherige Seite hidden
- Nächste Seite inert
- Zurück zur übergeordneten Ebene HTML-Globalattribute