HTML id Attribute

Exemple

Utilisez l' id attribut pour manipuler le texte avec JavaScript:

<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>

Essayez - le vous - même »

Plus "Try it yourself" exemples ci-dessous.

Définition et utilisation

L' id attribut spécifie un cadre unique id pour un élément HTML (la valeur doit être unique dans le document HTML).

L' id attribut est le plus utilisé pour pointer vers un style dans une feuille de style, et en JavaScript (via le DOM HTML) pour manipuler l'élément avec le spécifique id .

support du navigateur

Attribut
id	Oui	Oui	Oui	Oui	Oui

Différences entre HTML 4.01 et HTML5

En HTML5, l' id attribut peut être utilisé surtout élément HTML (il sera valide sur tout élément HTML. Cependant, il est pas nécessairement utile).

Dans HTML 4.01, l' id attribut ne peut pas être utilisé avec: <base>, <head>, <html>, <meta>, <param>, <script>, <style> et <title> .

Remarque: HTML 4.01 a de plus grandes restrictions sur le contenu des id valeurs (par exemple, en HTML 4.01 id valeurs ne peuvent pas commencer par un chiffre).

Syntaxe

<elementid="id">

Attribut valeurs

Valeur	La description
id	Indique un cadre unique id pour l'élément. règles de nommage: Doit contenir au moins un caractère Ne doit pas contenir de caractères d'espace En HTML, toutes les valeurs sont insensibles à la casse

Autres exemples

Exemple 1

Utilisez l' id attribut pour créer un lien vers un élément avec un spécifié id dans une page:

<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>

Essayez - le vous - même »

exemple 2

Utilisez l' id attribut au texte de style avec CSS:

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

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

</body>
</html>

Essayez - le vous - même »