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.

Comment obtenir les valeurs CSS dans JavaScript
getComputedStyle returns an object that contains every CSS property and their respective values

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”.

Comment obtenir les valeurs CSS dans JavaScript
Outils de développement Chrome

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 😉

Catégories : javascript

siddhy

Développeur web full stack depuis une 15aine d'année dans une agence web du sud de la France et Geek depuis toujours, l'apprentissage et le partage font parti intégrante de ma philosophie au même titre que l'évolution personnelle et la sagesse bouddhiste.

0 commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *