javascript css trick

/Ajout de Classes CSS en JavaScript

7 juillet 2021

Ajouter des classes CSS à des éléments HTML en JavaScript est une opération courante pour modifier dynamiquement le style des éléments. Vous pouvez le faire en utilisant la méthode classList.add() sur les éléments sélectionnés.

Méthode simple

const element = document.querySelector("selector");
element.classList.add("class"); 

Dans cet exemple, remplacez "selector" par le sélecteur de l'élément auquel vous souhaitez ajouter la classe, et "class" par le nom de la classe CSS que vous voulez appliquer.

Ajout de plusieurs classes

Il est également possible d'ajouter plusieurs classes en une seule fois :

const firstParagraph = document.querySelector("p");
firstParagraph.classList.add("text-center", "text-xxl", "italic"); 

Dans cet exemple, la classe text-center, text-xxl, et italic sont ajoutées à l'élément p sélectionné. Vous pouvez ajouter autant de classes que nécessaire en les séparant par des virgules.

N'oubliez pas que cette méthode ajoute des classes sans supprimer les classes existantes. Si vous souhaitez retirer une classe, utilisez classList.remove() de manière similaire.


En utilisant ces exemples et en ajustant les sélecteurs et les noms de classe, vous pourrez facilement ajouter des classes CSS à vos éléments HTML en JavaScript.

Partage

©2024 Jeremy Chaufourier.