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 :

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

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

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

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

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

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

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 :

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

Et maintenant la largeur :

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

Et maintenant la taille de la police :

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

Les styles suivants sont définis pour l'élément :

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

Lors d'un clic sur le bouton, affichez la largeur et la hauteur de l'élément.

Les styles suivants sont définis pour l'élément :

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

Lors d'un clic sur le bouton, doublez la largeur et la hauteur de l'élément.