En Javascript, manipuler les CSS nous fera rencontrer l’une ou l’autre contrainte selon la technique utilisée. La modification des class HTML est encore la méthode la plus sûre.
Voici toutefois les possibilités offertes par Javascript pour modifier les CSS de vos éléments HTML.
.style
var monElement = document.getElementById("titre");monElement.style;monElement.style.backgroundColor = "red";
Nous utilisons ici le raccourci .style pour récupérer un attribut HTML, même si l’attribut style n’apparaît pas dans notre balise HTML initiale.
Lorsque nous lui ajoutons la règle CSS pour modifier la couleur de fond en rouge, il se comporte comme pour un autre attribut et va ajouter dans la balise HTML l’attribut style. Il suffit de rappeler notre variable originelle pour s’en rendre compte.
monElement;
Syntaxe
En Javascript, on ne peut pas utiliser exactement la même syntaxe que CSS pour les propriétés. Il faut retirer les tirets des propriétés qui en contiennent et les remplacer par une majuscule au second mot.
background-color devient backgroundColorpadding-top devient paddingTopdevient
border-radius borderRadius
Etc.
Pour les valeurs de ces propriétés, le problème ne se pose pas car il s’agit de chaînes de caractères.
Nous avons un gros souci avec cette technique, elle peut ajouter des styles mais ne peut récupérer que les styles déjà déclarés dans l’attribut style de la balise HTML ! Elle ne fonctionne ni avec la balise <style> qui serait dans le <head> de votre page, ni avec une feuille de styles externe. Nous allons donc devoir faire appel à une autre technique dans la plupart des cas.
.getComputedStyle
var monElement = document.getElementById("titre");
var styles = getComputedStyle(monElement).backgroundColor;
styles;
.getComputedStyle récupère l’intégralité des styles calculés, qu’ils soient déclarés quelque part ou ceux par défaut du navigateur. Voyons d’ailleurs la longue liste que cela représente :
var stylesComplets = getComputedStyle(monElement);
stylesComplets;
Cette technique a un premier défaut qui peut parfois être ennuyeux : elle ne gère pas les unités relatives (%, em, rem, vh, vw…) car nous parlons ici des styles calculés. Nous aurons toujours le résultat du calcul final en pixels. Pour visualiser ce défaut, demandons-lui la largeur de notre élément.
var largeur = getComputedStyle(monElement).width;
largeur;
Son second défaut est que cette technique ne peut pas modifier quoi que ce soit, nous devons alors utiliser la technique précédente pour créer un attribut style qui viendra modifier les styles.