Salut,Modifier le CSS avec Javascript - logo

Le dernier article nous a permis de modifier du HTML avec du Javascript, aujourd’hui, on va voir comment modifier le CSS avec Javascript !

Une fois les éléments HTML mis en place, il n’est pas très difficile d’ajouter le CSS.

Il est aussi possible d’interroger des éléments déjà stylisés pour récupérer les valeurs de chaque propriétés . Cela peut être très utile quand on a pas accès au fichier CSS.

Pour suivre cet article, il vaut mieux être un peu à l’aise avec les techniques de récupérations d’éléments HTML, pour cela tu peux jeter un oeil sur ces articles, Javascript, les débuts dans le DOM et Créer un élément HTML en Javascript.

Donner du style à un élément

La mécanique est assez simple, puisqu’il suffit d’appliquer la propriété .style à une variable JS renvoyant un élément HTML. En gros si tu appliques .style à un nombre ou à un booléen, ça va pas donner grand chose à part peut être une erreur…? Je n’ai pas fait le test mais j’imagine…

Une fois la propriété .style mise en place, le reste tu sais déjà faire en fait, puisqu’on va saisir le nom d’une propriété CSS puis sa valeur.

Une des principales différence entre CSS et JS c’est qu’en CSS on écrit ceci:

nom-de-la -propriété : « valeur »;

Avec JS c’est un peu différent:

variable.style.propriete = « valeur »;

Note bien le signe = avec JS, si tu mets les deux points, ça retourne une erreur, je l’ai faite aussi celle là…

Il y a un autre détail à ne pas oublier. Il y a certaines propriétés CSS qui sont dites « composées » comme background-color, font-family box-shadow, etc.

On peut agir sur ces propriétés en Javascript, en ravanche on va légèrement modifier la syntaxe, en supprimant le tiret et en utilisant le camelCase pour les mots suivant ce trait d’union:

propriété font-family en Javascript => variable.style.fontFamily = « Arial »;

Un petit exemple pour démarrer, on reprend la base du code HTML des exemples précédent, avec un peu de CSS dans le header:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Instruments de musiques</title>
	<style>
        
        h1{
            text-shadow:  10px 10px 10px #666;
        }


         li:first-child{
            color:red;
        }

    </style>
	
</head>

<body>
<h1>Les instruments utilisés en musiques actuelles</h1>
    <div>
        <ul id="instruments">
          	<li>Guitare</li>
            <li>Basse</li>
            <li id="batterie">Batterie</li>
        </ul>
    </div>
    <script>
	</script>
</body>

</html>

Voyons comment mettre un peu de CSS avec Javascript:

document.querySelector("h1").style.color = "#D00"; // le h1 devient rouge
        
let liste = document.getElementsByTagName("li"); on cible les li
        
for(let i = 0; i < document.getElementsByTagName("li").length; i++){
        
    liste[i].style.backgroundColor = "#00" + (7 + i); //  permet ici de faire un dégradé de bleu à chaque li
};

    liste[1].style.color = "white"; // met le 2 ème li en  blanc
    liste[2].style.color = "lime"; // met le 3 ème li en vert

Donc tu vois, rien de compliqué dans la façon de faire, mais je pense qu’il ne faut pas abuser de ce genre de chose. Personnellement je pense que j’utiliserais ces propriétés que pour de petites modifications ou des effets particuliers comme le dégradé de l’exemple. Je ne me vois pas créer le CSS d’une page entièrement avec du Javascript…

Modifier un style existant

On peut accéder au style d’un élément ciblé en écrivant ce code :

        console.log(liste[0].style.color); // => n'affiche rien
        console.log(liste[1].style.color); // => affiche white
        console.log(liste[2].style.color); // => affiche lime

Toi qui es perspicace, tu t’es surement rendu compte qu’il ne retournait pas toutes les valeurs. En effet, seules les valeurs ajoutées avec Javascript sont lues avec la propriété .style.  Cette propriété ne va pas lire le style contenu dans une feuille externe CSS ou lorsque le CSS est intégré dans la page HTML, comme c’est le cas dans notre exemple.

Pour accéder des propriétés CSS créées entre balises style ou une feuille CSS, il faut utiliser la fonction  suivante :

getComputedStyle(« nomDelElementCible« );.

Cette fonction retourne une liste de toutes les propriétés CSS de l’éléments ( 282 propriétés…).

On va donc dans l’exemple suivant cibler le premier li dont on voulait récupérer la valeur de la propriété color, tant qu’on y est on va faire deux autres tests:

let infoLi = getComputedStyle(document.getElementsByTagName("li")[0]);
    console.log(infoLi.color); // => retourne une couleur en rbg(), correspondant au rouge

    console.log(infoLi.backgroundColor); // => retourne une couleur en rbg(), correspondant au bleu définit en héxadécimal

    console.log(infoLi.boxShadow); // retourne none, on a pas définit cette propriété pour cet élément

 

Voilà pour les bases de la manipulation des propriétés CSS avec du Javascript. Encore une fois, cette technique doit être utilisée à petite dose à mon avis. Il est en revanche très intéressant de savoir l’utiliser pour créer des effets sur les pages web, et ajouter un peu de style à toutes les interactions  qu’on peu ajouter à une page avec Javascript.

Bon week-end et à bientôt!

Guillaume