Le HTML d'attribut
class est utilisé pour spécifier une classe pour un élément HTML.Plusieurs éléments HTML peuvent partager la même classe.
Utilisation de l'attribut class
L' classattribut est souvent utilisé pour pointer vers un nom de classe dans une feuille de style. Il peut également être utilisé par un JavaScript pour accéder et manipuler des éléments avec le nom de classe spécifique.
Dans l'exemple suivant, nous avons trois <div>éléments avec un classattribut avec la valeur "ville". Les trois <div> éléments seront stylisés de la même manière selon la .city définition de style dans la section head :
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
Dans l'exemple suivant, nous avons deux <span>éléments avec un classattribut avec la valeur "note". Les deux <span> éléments seront stylisés de la même manière selon la .note définition de style dans la section head :
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
Conseil : L' classattribut peut être utilisé sur n'importe quel élément HTML.
Remarque : Le nom de la classe est sensible à la casse !
Astuce : vous pouvez en apprendre beaucoup plus sur CSS dans notre didacticiel CSS .
La syntaxe de la classe
Pour créer une classe ; écrivez un point (.) suivi d'un nom de classe. Ensuite, définissez les propriétés CSS entre accolades {} :
Exemple
Créez une classe nommée "ville":
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
Classes multiples
Les éléments HTML peuvent appartenir à plusieurs classes.
Pour définir plusieurs classes, séparez les noms de classe par un espace, par exemple <div class="city main">. L'élément sera stylisé en fonction de toutes les classes spécifiées.
Dans l'exemple suivant, le premier <h2>élément appartient à la fois à la cityclasse et également à la mainclasse, et obtiendra les styles CSS des deux classes :
Exemple
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
Différents éléments peuvent partager la même classe
Différents éléments HTML peuvent pointer vers le même nom de classe.
Dans l'exemple suivant, à la fois <h2>et <p> pointent vers la classe "city" et partageront le même style :
Exemple
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
Utilisation de l'attribut class en JavaScript
Le nom de la classe peut également être utilisé par JavaScript pour effectuer certaines tâches pour des éléments spécifiques.
JavaScript peut accéder aux éléments avec un nom de classe spécifique avec la getElementsByClassName()méthode :
Exemple
Cliquez sur un bouton pour masquer tous les éléments avec le nom de classe "ville":
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
Ne vous inquiétez pas si vous ne comprenez pas le code dans l'exemple ci-dessus.
Vous en apprendrez plus sur JavaScript dans notre chapitre HTML JavaScript , ou vous pouvez étudier notre didacticiel JavaScript .
Résumé du chapitre
- L'attribut HTML
classspécifie un ou plusieurs noms de classe pour un élément - Les classes sont utilisées par CSS et JavaScript pour sélectionner et accéder à des éléments spécifiques
- L'
classattribut peut être utilisé sur n'importe quel élément HTML - Le nom de la classe est sensible à la casse
- Différents éléments HTML peuvent pointer vers le même nom de classe
- JavaScript peut accéder aux éléments avec un nom de classe spécifique avec la
getElementsByClassName()méthode
0 Commentaires