Le CSS seul ne suffit pas parfois. Vous pourriez avoir besoin de contrôler vos valeurs CSS avec JavaScript. Mais comment obtenir des valeurs CSS en JavaScript ?
Il s’avère qu’il y a deux façons possibles, selon que vous essayez d’obtenir des styles en ligne ou des styles calculés.
Obtenir des styles css en ligne dans javascript
Les styles en ligne sont des styles qui sont présents dans le HTML dans l’attribut de style.
<div class="element" style="font-size: 2em; color: red;">my div</div>
Pour obtenir des styles en ligne, vous pouvez utiliser la propriété style
.
const element = document.querySelector('.element')
const fontSize = element.style.fontSize
console.log(fontSize) // 2em
const color = element.style.color
console.log(color) // red
Obtenir des styles css calculés dans javascript
Si vos styles sont écrits dans le fichier CSS, vous devez obtenir le style calculé. Pour ce faire, vous pouvez utiliser getComputedStyle
.
Il prend deux valeurs :
const style = getComputedStyle(Element, pseudoElement);
Element
ici fait référence à l’élément que vous avez sélectionné avec querySelector
.
pseudoElement
fait ici référence à la chaîne de caractères du pseudo élément que vous essayez d’obtenir (le cas échéant). Vous pouvez omettre cette valeur si vous ne sélectionnez pas un pseudo-élément.
Prenons un exemple pour aider à donner un sens aux choses. Supposons que vous avez le HTML et le CSS suivants :
<div class="element"> This is my element </div>
.element { background-color: red }
Tout d’abord, vous devez sélectionner l’élément avec querySelector
. Ensuite, vous utilisez getComputedStyle
pour obtenir les styles de l’élément.
const element = document.querySelector('.element')
const style = getComputedStyle(element)
Si vous enregistrez le style, vous devriez voir un objet qui contient toutes les propriétés CSS et leurs valeurs respectives.

getComputedStyle
returns an object that contains every CSS property and their respective valuesVous pouvez aussi voir cet objet dans les outils de développement de Chrome et Firefox.
Pour les outils de développement Firefox, regardez sous “Elements”, “Computed”.

Pour obtenir la valeur d’une propriété CSS, vous écrivez la propriété en camel case.
const style = getComputedStyle(element)
const backgroundColor = style.backgroundColor
console.log(backgroundColor) // rgb(0, 0, 0)
Note 1 : getComputedStyle
est en lecture seule. Vous ne pouvez pas définir une valeur CSS avec getComputedStyle
.
Note 2 : getComputedStyle
récupère les valeurs CSS calculées. Vous obtiendrez des px
avec getComputedStyle
, pas des unités relatives comme em
et rem
.
Obtenir des styles css en javascript pour des pseudo-éléments
Pour obtenir des styles à partir de pseudo-éléments, vous devez passer une chaîne du pseudo-élément comme deuxième argument pour getComputedStyle
.
<div class="element"> This is my element </div>
.element { background-color: red }
.element::before { content: "Before pseudo element"; }
const element = document.querySelector('.element')
pseudoElementStyle = getComputedStyle(element, '::before')
console.log(pseudoElementStyle.content) // Before pseudo element
Conclusion
Vous pouvez obtenir des valeurs CSS en JavaScript par deux méthodes :
- La propriété
style
-
getComputedStyle
.
La propriété style
ne récupère que les valeurs CSS en ligne tandis que getComputedStyle
récupère les valeurs CSS calculées.
Si cet article vous a aidé n’hésitez pas à aller voir mon article sur les boucles en javascript ou le tri avec .sort() en javascript.
Merci pour la lecture. Vous pouvez partager cet article à foison et pourquoi pas me laisser un petit commentaire 😉
2 commentaires
Alain Mazy · 18 avril 2020 à 16 h 30 min
Salut siddhy, un grand merci pour ces explications que je ne connaissais pas, par contre, comment je peux changer une valeur CSS après ça? exemple, ceci ne fonctionne pas element.style.fontSize= 2rem
siddhy · 21 avril 2020 à 11 h 45 min
Bonjour Alain et merci de ton commentaire.
En fait je ne suis pas certain de comprendre car de mon côté, si j’ouvre ma console (F12) et que je tape :
document.querySelector(‘.hestia-title.entry-title’).style.fontSize = ‘1rem’
Alors la taille de police de mon titre change bien. Cibles tu bien ton “element” ? Il faut des guillements pour “2rem” aussi