Modifier les classes CSS en JavaScript
Chaque fois que nous travaillons avec les éléments DOM à l’intérieur du JavaScript, il y a des moments et des situations où nous devons fournir des interactions aux éléments HTML. Par exemple, changer les couleurs de fond d’un élément au clic de l’utilisateur, masquer un élément, modifier l’apparence d’un élément, etc. Cela peut se faire la plupart du temps en changeant les classes.
Le langage JavaScript vous offre différentes manières de faire tout cela. Voyons différentes méthodes à l’aide desquelles nous pouvons modifier les classes CSS à partir des éléments HTML.
Différentes manières de modifier la classe CSS en JavaScript
Ci-dessous, nous avons un document HTML qui se compose d’un seul élément div à l’intérieur de la balise body. Nous avons également une balise style qui contient un identifiant et deux classes.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#dimensions{
width: 500px;
height: 500px;
}
.bg_1{
background-color: crimson;
}
.bg_2{
background-color: teal;
}
</style>
</head>
<body>
<div id="dimensions" class="dimensions bg_1">
<script>
let myDiv = document.getElementById('dimensions');
myDiv.addEventListener("click", function(e) {
});
</script>
</body>
</html>
L’identifiant avec le nom dimensions contient la largeur et la hauteur. Les bg_1 et bg_2 sont deux classes qui ont une propriété background-color avec les couleurs crimson et teal, respectivement. La dimensions et bg_1 sont appliquées à l’élément HTML à l’intérieur de la balise body.
D’après le code, vous pouvez voir que nous avons déjà stocké l’élément div à l’intérieur de la variable myDiv en utilisant la méthode document.getElementById() et en passant cet élément id (dans ce cas dimensions) sous forme de chaîne à l’intérieur.
Notre objectif ici est de changer la couleur de fond de l’élément div de cramoisi à bleu sarcelle en changeant la classe bg_1 avec bg_2. Cela ne se fera que lorsque l’utilisateur sera sur l’élément div. Pour cela, nous avons également ajouté l’événement onClick en utilisant la méthode addEventListener() sur la variable myDiv à l’intérieur du JavaScript.
Nous suivrons différentes manières d’y parvenir, comme indiqué ci-dessous. Tout le code que nous écrirons ci-dessous ira à l’intérieur de la méthode addEventListener() sous la balise script.
Utilisation de la méthode className
Le moyen le plus simple de modifier une classe CSS en JavaScript est d’utiliser la méthode className. En utilisant cette méthode, vous pouvez remplacer toutes les classes existantes déjà présentes sur l’élément HTML par d’autres classes. Vous pouvez spécifier toutes les nouvelles classes que vous souhaitez ajouter sous forme de chaîne avec séparation d’espace.
myDiv.className = 'bg_2';
Notez que cela remplacera toutes les classes existantes présentes sur l’élément par les nouvelles classes.
Utilisation des méthodes classList.remove et classList.add
Toutes les classes présentes sur l’élément HTML sont accessibles à l’aide de la méthode classList. En utilisant classList.remove, vous pouvez supprimer une classe spécifique, et en utilisant classList.add, vous pouvez ajouter de nouvelles classes à l’élément. Dans notre exemple, nous allons d’abord supprimer la classe bg_1 en utilisant classList.remove, puis ajouter une nouvelle classe, c’est-à-dire bg_2 en utilisant classList.add comme indiqué ci-dessous.
myDiv.classList.remove("bg_1");
myDiv.classList.add("bg_2");
C’est ainsi que nous modifions les classes CSS en utilisant ces méthodes.
Utilisation de la méthode classList.replace()
Une autre façon de changer la classe CSS est d’utiliser la méthode classList.replace(). Cette méthode prend deux arguments, le premier est la classe existante qui est déjà présente sur l’élément que l’on veut remplacer (Dans ce cas bg_1), et le second est la nouvelle classe que vous voulez ajouter à l’élément (Dans ce cas bg_2).
myDiv.classList.replace('bg_1', 'bg_2');
Ce sont quelques-unes des méthodes à l’aide desquelles nous pouvons modifier les classes CSS en JavaScript.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn