Het lezen van eigenschappen uit CSS-bestanden in JavaScript

Eigenschappen die in een CSS-bestand zijn ingesteld, kunnen worden gelezen met behulp van de speciale functie getComputedStyles.

Laten we eens kijken hoe dat gaat. Stel dat we het volgende element hebben:

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

Stel dat voor dit element de volgende stijlen zijn ingesteld:

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

Laten we een verwijzing naar het element in een variabele krijgen:

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

Geef nu de verwijzing naar het verkregen element door als parameter aan de functie getComputedStyles:

let computedStyle = getComputedStyle(elem);

Als resultaat krijgen we een object dat de waarden van CSS-eigenschappen voor ons element bevat. Laten we het gebruiken om bijvoorbeeld de kleur te lezen:

console.log(computedStyle.color); // geeft 'red' weer

En nu de breedte:

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

En nu de lettergrootte:

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

Voor het element zijn de volgende stijlen ingesteld:

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

Bij een klik op de knop, geef de breedte en hoogte van het element weer.

Voor het element zijn de volgende stijlen ingesteld:

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

Bij een klik op de knop, verdubbel de breedte en hoogte van het element.