Salut,
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:
Voyons comment mettre un peu de CSS avec Javascript:
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 :
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:
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
16 janvier 2021 at 18 h 42 min
hey,
dans le cadre d’un site web de présentation d’objet 3D, j’aimerais pouvoir modifier dynamiquement du CSS.
par exemple,
prenons un cube en 3D.
j’aimerais que mon cube pivote sur Y de 90degrés quand on clique sur un bouton situé à coté. Sauf que le « truc » que j’ai fait marche qu’une fois.
https://jsbin.com/wakajoq/edit?html,css,js,output