Comment obtenir les valeurs CSS en 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 les styles inline

Les styles « inline » ou en ligne en français sont des styles qui sont présents dans le HTML dans l’attribut de style.

<div class="element" style="font-size: 2em; color: red;">
    Rouge
</div>

Pour obtenir le style, 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 le style à partir d’une feuille de style

Si vos styles sont écrits dans un fichier CSS, vous devez vous y prendre d’une autre manière. 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"> Mon élément </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 faite un console.log de style, vous devriez voir un objet qui contient toutes les propriétés CSS et leurs valeurs respectives.
Pour obtenir la valeur d’une propriété CSS, vous écrivez la propriété en cas de chameau.

const style = getComputedStyle(element)

const backgroundColor = style.backgroundColor
console.log(backgroundColor) // rgb(0, 0, 0, 0)

Remarque : getComputedStyle est en lecture seule. Vous ne pouvez pas définir une valeur CSS avec getComputedStyle.
2éme Remarque : getComputedStyle récupère les valeurs CSS calculées. Vous obtiendrez les valeurs en px de getComputedStyle, pas des unités relatives comme em et rem.

···