Modifier les styles CSS avec JavaScript

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 :

javascript-couleur

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