Neueste Web-Entwicklung Tutorials
 

HTML id Attribute


Beispiel

Verwenden Sie das id - Attribut Text mit JavaScript zu manipulieren:

<html>
<body>

<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>

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

</body>
</html>
Versuch es selber "

Mehr "Versuchen Sie es selbst" Beispiele unten.


Definition und Verwendung

Das id - Attribut gibt eine eindeutige id für ein HTML - Element (der Wert muss innerhalb des HTML - Dokuments eindeutig sein).

Das id - Attribut wird am häufigsten genutzt , um einen Stil in einem Stylesheet zu zeigen und von JavaScript (über das HTML - DOM) , um das Element mit dem spezifischen zu manipulieren id .


Browser-Unterstützung

Attribut
id ja ja ja ja ja

Unterschiede zwischen HTML 4.01 und HTML5

In HTML5, die id kann Attribut aufeinem beliebigen HTML - Element verwendet werden (es wird auf jedem beliebigen HTML - Element zu validieren. Es ist jedoch nicht unbedingt sinnvoll ist).

In HTML 4.01, die id : kann Attribut nicht verwendet werden mit <base>, <head>, <html>, <meta>, <param>, <script>, <style> und <title> .

Hinweis: HTML 4.01 hat eine größere Einschränkungen für den Inhalt der id - Werte (zum Beispiel, in HTML 4.01 - id - Werte können nicht mit einer Zahl beginnen).


Syntax

<elementid="id">

Werte Attribut

Wert Beschreibung
id Gibt eine eindeutige id für das Element. Benennungsregeln:
  • Es muss mindestens ein Zeichen enthalten
  • Darf keine Leerzeichen enthalten
  • In HTML sind alle Werte Groß- und Kleinschreibung

Mehr Beispiele

Beispiel 1

Verwenden Sie das id - Attribut auf ein Element mit einem angegebenen Link - id innerhalb einer Seite:

<html>
<body>

<h2><a id="top">Some heading</a></h2>

<p>Lots of text....</p>
<p>Lots of text....</p>
<p>Lots of text....</p>

<a href="#top">Go to top</a>

</body>
</html>
Versuch es selber "

Beispiel 2

Verwenden Sie das id - Attribut Stil Text mit CSS:

<html>
<head>
<style>
#myHeader {
    color: red;
    text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">w3ii is the best!</h1>

</body>
</html>
Versuch es selber "

Verwandte Seiten

HTML - Tutorial: HTML Attribute

CSS Tutorial: CSS - Selektoren

CSS Referenz: CSS #id Selector

HTML - DOM Referenz: HTML DOM getElementById() Methode

HTML - DOM Referenz: HTML DOM id Property

HTML - DOM Referenz: HTML DOM Style - Objekt