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 :
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