Lecture des propriétés depuis les fichiers CSS en JavaScript

Les propriétés définies dans un fichier CSS peuvent être lues à l'aide d'une fonction spéciale getComputedStyles.

Voyons comment cela se fait. Supposons que nous ayons l'élément suivant :

html<div id="elem">
  text
</div>

Supposons que les styles suivants soient définis pour cet élément :

css#elem {
  width: 100px;
  color: red;
  font-size: 20px;
}

Récupérons une référence à l'élément dans une variable :

javascriptlet elem = document.querySelector('#elem');

Maintenant, passons la référence à l'élément obtenu en tant que paramètre de la fonction getComputedStyles :

javascript let computedStyle = getComputedStyle(elem);

En résultat, nous obtiendrons un objet contenant les valeurs des propriétés CSS pour notre élément. Utilisons-le pour lire, par exemple, la couleur :

javascriptconsole.log(computedStyle.color); // affichera 'red'

Et maintenant la largeur :

javascriptconsole.log(computedStyle.width); // affichera '100px'

Et maintenant la taille de la police :

javascriptconsole.log(computedStyle.fontSize); // affichera '20px'

css#elem {
  width: 200px;
  height: 200px;
}

css#elem {
  width: 200px;
  height: 200px;
}