Attribut id HTML

HTML id L'attribut est utilisé pour spécifier un ID unique pour un élément HTML.

Un document HTML ne peut pas contenir plusieurs éléments ayant le même ID.

Utilisation de l'attribut id

id L'attribut spécifie l'ID unique d'un élément HTML. id La valeur de l'attribut doit être unique dans le document HTML.

id Les propriétés sont utilisées pour pointer vers une déclaration de style spécifique dans une feuille de style. JavaScript peut également l'utiliser pour accéder et manipuler des éléments ayant un ID spécifique.

La syntaxe de l'ID est : écrire un dièse (#), suivi d'un nom d'ID. Ensuite, définir les propriétés CSS entre accolades {}.

下面的例子中我们有一个 <h1> qui pointe vers le nom d'id "myHeader". Dans l'exemple suivant, nous avons un <h1> Les éléments suivent les éléments #myHeader Les définitions de styles sont utilisées pour appliquer des styles :

Exemple

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">Mon En-tête</h1>
</body>
</html>

Essayez-le vous-même

Remarque :Les noms d'id sont sensibles à la casse !

Remarque :Un id doit contenir au moins un caractère et ne peut pas contenir des caractères d'espace (espace, tabulation, etc.).

Différences entre Class et ID

Un même nom de classe peut être utilisé par plusieurs éléments HTML, tandis qu'un nom d'id ne peut être utilisé qu' par un seul élément HTML sur la page :

Exemple

<style>
/* Définir les styles pour l'élément avec l'id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* Définir les styles pour tous les éléments avec la classe "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- Un élément peut avoir un id unique -->
<h1 id="myHeader">Mes Villes</h1>
<!-- Plusieurs éléments peuvent avoir le même nom de classe -->
<h2 class="city">London</h2>
<p>London est la capitale de l'Angleterre.</p>
<h2 class="city">Paris</h2>
<p>Paris est la capitale de la France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo est la capitale du Japon.</p>

Essayez-le vous-même

Avis :Veuillez consulter notre Tutoriel CSS Pour en savoir plus sur les connaissances CSS.

Mise en œuvre des signets HTML par l'ID et le lien

Les signets HTML permettent aux lecteurs de sauter directement à une partie spécifique de la page web.

Si la page est longue, les signets peuvent être très utiles.

Pour utiliser un signet, vous devez d'abord le créer, puis ajouter un lien à celui-ci.

Ensuite, lorsque vous cliquez sur le lien, la page défile jusqu'à la position avec le signet.

Exemple

Tout d'abord, utilisez id Attribut de création de signet :

<h2 id="C4">Chapitre 4</h2>

Ensuite, sur la même page, ajoutez un lien vers ce signet ("Aller au chapitre 4") :

Exemple

<a href="#C4">Aller au chapitre 4</a>

Essayez-le vous-même

Ou, sur une autre page, ajoutez un lien vers ce signet ("Aller au chapitre 4") :

<a href="html_demo.html#C4">Aller au chapitre 4</a>

Utilisation de l'attribut id en JavaScript

JavaScript peut également utiliser l'attribut id pour exécuter certaines tâches pour un élément spécifique.

JavaScript peut utiliser getElementById() Méthode d'accès aux éléments ayant un id spécifique :

Exemple

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

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

Essayez-le vous-même

Avis :Veuillez utiliser JavaScript HTML dans ce chapitre, ou dans nos Tutoriel JavaScript apprendre JavaScript ici.

Résumé de ce chapitre

  • id L'attribut est utilisé pour spécifier un id unique pour un élément HTML
  • id Les valeurs de l'attribut doivent être uniques dans le document HTML
  • CSS et JavaScript peuvent utiliser id L'attribut peut être utilisé pour sélectionner des éléments ou définir le style d'un élément spécifique
  • id Les valeurs de l'attribut sont sensibles à la casse
  • id Les attributs peuvent également être utilisés pour créer des signets HTML
  • JavaScript peut utiliser getElementById() Méthode d'accès aux éléments ayant un id spécifique