Manipuler le style avec JavaScript

Une fois que vous savez sélectionner des éléments HTML, la première chose que l'on va apprendre à faire c'est à modifier leur style depuis le JavaScript.

Modifier une propriété de style d'un élément

<section id="box">
    
</section>

Pour modifier une propriété de style d'un élément vous allez d'abord devoir le sélectionner :

let box = document.querySelector("#box");

Puis, toutes les propriétés de style sont dans l'objet style contenu dans votre variable, au format d'écriture Camel Case (première lettre en minuscule et une Majuscule à chaque début de mot) par exemple :

let box = document.querySelector("#box");
let bgColor = box.style.backgroundColor; // si je veux la récupérer
box.style.backgroundColor = "red"; // si je veux la modifier

Modifier la taille d'un élément

La hauteur et la largeur d'un élément sont accessibles sans avoir à passer par l'objet style, vous pouvez simplement utiliser :

let box = document.querySelector("#box");

let boxHeight = box.height; // si je veux la récupérer
box.height = "150px"; // si je veux la modifier

let boxWidth = box.width; // si je veux la récupérer
box.width = "150px"; // si je veux la modifier

Modifier les classes d'un élément

<section class="box">
    
</section>

En JavaScript, vous pouvez également ajouter ou retirer des classes CSS à un élément en passant par le tableau classList:

let box = document.querySelector(".box");
let classes = box.classList; // pour y accéder

Ajouter une classe

Si vous voulez ajouter une classe :

let box = document.querySelector(".box");
box.classList.add("laClasse");

Retirer une classe

Pour en retirer une :

let box = document.querySelector(".box");
box.classList.remove("laClasse");

Vérifier la présence d'une classe

Pour vérifier si un élément a une classe :

let box = document.querySelector(".box");
let hasTheClass = box.classList.contains("laClasse");

Ajouter/retirer une classe

Pour retirer une classe si elle est là et l'ajouter si elle n'y est pas :

let box = document.querySelector(".box");
box.classList.toggle("laClasse");

30 January 2026