Modifier les styles CSS avec JavaScript

JavaScript publié le 18 Mai 2022 mis à jour le 24 Nov 2023 Guillaume

Une fonctionnalité extrêmement puissante du JavaScript consiste à changer les mises en forme CSS avec la propriété style. L'avantage, par rapport au langage CSS, est que le JavaScript peut modifier les styles suite à des actions de l'utilisateur ou après un délai programmé.

Ci-dessous un script pour changer la couleur d'un paragraphe en cliquant sur des boutons :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
		function changeCouleur(nouvelleCouleur) {
			document.getElementById("paragraphe").style.color = nouvelleCouleur;
		}
		</script>
	</head>
	<body>
		<p id="paragraphe">Un peu de texte</p>
		<button onclick="changeCouleur('blue');">blue</button>
		<button onclick="changeCouleur('red');">red</button>
	</body>
</html>

Le clic sur les boutons modifie la propriété CSS color. Résultat si on appuie sur le bouton red :

L'exemple suivant permet de changer la couleur d’arrière-plan d’une balise suite à un clic sur un bouton.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
		function changefond() {
			document.getElementById("titre").style.backgroundColor = "#FF0000"; 
		}
		</script>
	</head>
	<body>
		<h1 id="titre">La couleur de fond du titre va changer au clic sur le bouton</h1>
		<button onclick="changefond()">Change la couleur</button>
	</body>
</html>

Beaucoup de menus réalisés en JavaScript utilisent la propriété visibility pour masquer ou démasquer des balises. Cet exemple pourrait également utiliser la propriété display avec les valeurs none et block.

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <script>
        // La fonction qui affiche ou masque l'élément 
        function bascule(elem) {
            // Quel est l'état actuel ?
            const bouton = document.getElementById(elem);
            if (bouton.style.visibility == "hidden")
                bouton.style.visibility = "visible";
            else
                bouton.style.visibility = "hidden";
        }
    </script>
</head>

<body>
    <input type="button" onclick="bascule('boite')" value="On/Off">
    <div id="boite" style="visibility: hidden">
        <h1>Coucou, je suis là !</h1>
        <p>Et moi aussi !</p>
    </div>
</body>

</html>

Les propriétés CSS qui suivent l'expression getElementById(elem).style s’écrivent en minuscules si la propriété est en un seul mot, et en "minusculeMajuscule" si la propriété est un mot composé. Par exemple, on écrira borderColor pour la propriété CSS border-color. On peut de cette manière modifier la plupart des propriétés CSS, ce qui laisse imaginer les immenses possibilités du JavaScript grâce aux modifications des CSS.

Toutes les propriétés CSS modifiables sur : http://www.w3schools.com/jsref/dom_obj_style.asp