Comment obtenir les valeurs CSS dans JavaScript

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.

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

1. La propriété style
2. 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 😉