Maison > Article > interface Web > Comment appliquer deux classes CSS à un seul élément ?
Comment appliquer deux classes CSS à un seul élément ?
- 王林avant
- 2023-09-16 18:33:031068parcourir
Nous pouvons appliquer plusieurs classes CSS à un seul élément en utilisant l'attribut class et en séparant chaque classe par un espace.
Méthode
Il existe deux façons d'appliquer deux classes CSS à un seul élément -
Utilisez les attributs de classe -
<div class="class1 class2">This element has two CSS classes applied to it</div>
Utiliser JavaScript −
Étant donné qu'il existe une balise p avec l'identifiant 'paragraphe', nous souhaitons appliquer ces classes -
<script>
const paragraph = document.getElementById('paragraph');
paragraph.classList.add('one');
paragraph.classList.add('two');
</script>
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Multiple Classes</title>
<style>
.one {
color: red;
}
.two {
font-size: 24px;
}
</style>
</head>
<body>
<p class = "one two">Using Class Attribute</p>
<p id = 'paragraph'>Using JavaScript</p>
<script>
const paragraph = document.getElementById('paragraph');
paragraph.classList.add('one');
paragraph.classList.add('two');
</script>
</body>
</html>
Instructions
Enregistrez le code ci-dessus dans un fichier avec l'extension .html.
Ouvrez le fichier dans votre navigateur Web.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：A quoi servent les propriétés avant l’astérisque en CSS ?Article suivant：A quoi servent les propriétés avant l’astérisque en CSS ?