Dans cet article, vous apprendrez à modifier les classes CSS à l’aide du l’objet JavaScript classList pour votre projet de manipulation du DOM. L’objet classList vous permet d’ajuster les classes CSS qui sont attribuées à un élément HTML.
<!DOCTYPE html>
<html>
<head>
<title>Mon titre</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
.colorText {
color: purple;
}
.boldText {
font-weight: bold;
}
.bigText {
font-size: 35px;
}
</style>
</head>
<body>
<p id="myText">
Hello World!
</p>
</body>
</html>Modifions maintenant votre texte avec la propriété classList et appliquons vos classes CSS.
Utilisation des méthodes classList .add() et .contains()
Créez un fichier index.js, récupérez une référence à votre élément de paragraphe, et faites appel à la méthode classList.add() :
const myText = document.getElementById('myText');
myText.classList.add('colorText');La méthode intégrée classList.add() applique une classe à votre élément HTML. Dans ce cas, votre texte dans l’élément paragraphe apparaîtra désormais en violet.
Vous pouvez également vérifier si la classe CSS existe dans votre élément de paragraphe en utilisant la méthode classList.contains() qui renvoie un booléen :
const myText = document.getElementById('myText');
console.log(myText.classList.contains('colorText')); // truePuisque la classe CSS colorText existe dans votre élément de paragraphe, votre appel renvoie true.
Utilisation des méthodes .item() et .remove() de classList
Dans votre fichier index.js, ajoutez d’autres classes CSS à votre élément de paragraphe :
const myText = document.getElementById('myText');
myText.classList.add('boldText');
myText.classList.add('bigText');
console.log(myText.classList); // ['colorText', 'boldText', 'bigText'];La propriété classList stocke chaque classe supplémentaire dans un tableau. Si vous consolez myText.classList, vous obtiendrez un tableau contenant vos classes CSS.
Pour vérifier l’indice spécifié de chaque classe CSS dans le tableau, faites appel à la méthode classList.item() :
const myText = document.getElementById('myText');
myText.classList.item('boldText'); // 2Pour supprimer une classe CSS, utilisez la méthode classList.remove() :
const myText = document.getElementById('myText') ;
myText.classList.remove('bigText') ;
console.log(myText.classList) ; // ['colorText', 'boldText'] ;Une fois que vous avez consolé myText.classList, la classe CSS que vous avez supprimée n’apparaît pas dans le tableau et ne s’appliquera pas à votre élément de paragraphe.
Maintenant que vous pouvez ajouter, vérifier et supprimer des classes CSS, voyons comment amplifier d’autres méthodes classList.
Gestion de la méthode classList .toggle()
Au lieu d’appeler classList.add() et classList.remove() simultanément, vous pouvez utiliser la méthode classList.toggle() :
Pour ce faire, implémentez un écouteur d’événements sur un bouton dans votre fichier index.js :
textButton.addEventListener('click', () => {
myText.classList.toggle('newFont');
});À chaque clic, classList.toggle() ajoute la classe CSS si elle n’existe pas dans le tableau classList et renvoie true. Si la classe CSS existe, la méthode la supprime et renvoie false.
const anotherClass = myText.classList.toggle('newSize');
console.log(anotherClass); // true --> La classe a été ajoutéeVous pouvez également ajouter un booléen comme deuxième argument facultatif dans la méthode classList.toggle(). Cela ajoutera ou supprimera la classe CSS, en fonction de l’évaluation du deuxième argument :
const bool = false;
let firstToggle = myText.classList.toggle('newSize', bool);
console.log(firstToggle);
// false, 'newFont' existe déjà et sera supprimé du tableau classList
let secondToggle = shadesEl.classList.toggle('newColor', !bool);
console.log(secondToggle);
// true, 'newColor' n'existe pas et la classe sera ajoutée.La méthode classList.toggle() permet d’ajouter et de supprimer des classes CSS, qu’elles existent ou non dans votre tableau, avec des lignes de code plus courtes.
Conclusion
La propriété classList offre des performances et des fonctionnalités accrues pour modifier vos éléments HTML et leurs classes CSS en JavaScript.
Pour en savoir plus, consultez l’article sur comment modifier le dom en javascript.
