Comment ajouter une CLASS CSS en JavaScript ?

Réponses rédigées par Antoine

Dernière mise à jour : 2020-08-02 15:27:11

Question

Comment puis-je ajouter une CLASS CSS en JavaScript ?

Réponse

Pour ajouter une CLASS CSS à une balise HTML, en JavaScript, vous pouvez utiliser la propriété className.

Voici un exemple pour ajouter une CLASS CSS avec la propriété JavaScript className, pour colorer en rouge un texte qui dispose déjà d'une autre CLASS utilisée pour définir la taille du texte :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comment ajouter une CLASS CSS en JavaScript ?</title>
<style> 
.taille { 
font-size: 30px;
} 
.rouge { 
color: red;
} 
</style> 
</head>
<body>
<p class="taille" id="texte">Ajouter une CLASS en JS avec className</p>        
<script>   
var texte = document.getElementById("texte"); 
texte.className += " rouge";
</script>
</body>
</html>

Réponse

Tout en reprenant l'exemple de Antoine, vous pouvez aussi utiliser la méthode add() avec l'élément classList pour ajouter une CLASS CSS à une balise HTML en JavaScript.

<script>   
var texte = document.getElementById("texte"); 
texte.classList.add("rouge")
</script>

Remarque : Pour supprimer une CLASS il vous faudra utiliser la méthode remove() ou bien clear() pour supprimer toutes les CLASS.