L’attribut id fait référence à une valeur unique pour un élément HTML. Cette valeur HTML id peut être utilisée avec CSS et JavaScript pour effectuer certaines tâches.
L’attribut id avec CSS
En CSS, si vous souhaitez sélectionner un élément avec un identifiant spécifique, écrivez un caractère dièse (#), suivi de l’identifiant de l’élément.
Exemple:
Utilisez l’identifiant HTML « myid » avec CSS:
<style>
#myid {
background-color: lightpink;
color: black;
padding: 40px;
text-align: center;
}
</style>
<h1 id="myid">Un exemple de l'attribut id</h1>
Remarque: Ici, l’attribut id est « myid » et peut être utilisé sur n’importe quel élément HTML. La valeur de l’ID HTML est sensible à la casse. Elle doit contenir au moins un caractère et ne pas contenir d’espaces (espaces, tabulations, etc.).
Différence entre class et id
Un nom de classe HTML peut être utilisé par plusieurs éléments, tandis qu’un élément HTML ne peut avoir qu’un seul identifiant appartenant à cet élément.
Exemple:
<!DOCTYPE html>
<html>
<head>
<style>
/* appliquer le style en utilisant l’id "myid" */
#myid {
background-color: pink;
color: black;
padding: 40px;
text-align: center;
}
/* appliquer le style à tout les éléments en utilisant la classe "fruit" */
.fruit {
background-color: orange;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Différence entre class et id</h2>
<h1 id="myid">Mes Fruits</h1>
<h2 class="fruit">Mango</h2>
<p>Le roi de tout les fruits.</p>
<h2 class="fruit">Orange</h2>
<p>Plein de Vitamine C</p>
<h2 class="fruit">Pomme</h2>
<p>Une pomme mieux qu’un docteur.</p>
</body>
</html>
Id avec JavaScript
Vous pouvez utiliser un identifiant HTML avec la méthode JavaScript getElementById () pour accéder à un élément avec un identifiant spécifié.
Exemple:
<!DOCTYPE html>
<html>
<body>
<h2>HTML id avec JavaScript</h2>
<h1 id="myid">Bonjour w3tutoriels</h1>
<button onclick="displayResult()">Texte</button>
<script>
function displayResult() {
document.getElementById("myid").innerHTML = "Future plein de succée!";
}
</script>
</body>
</html>