Læsning af egenskaber fra CSS-filer i JavaScript

Egenskaber defineret i en CSS-fil kan læses ved hjælp af en speciel funktion getComputedStyles.

Lad os se, hvordan det gøres. Lad os antage, at vi har følgende element:

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

Lad os antage, at følgende stilarter er defineret for dette element:

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

Lad os hente en reference til elementet i en variabel:

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

Nu sender vi referencen til det hentede element som en parameter til funktionen getComputedStyles:

let computedStyle = getComputedStyle(elem);

Som et resultat får vi et objekt, der indeholder værdierne for CSS-egenskaber for vores element. Lad os bruge det til at læse, for eksempel, farven:

console.log(computedStyle.color); // vil udskrive 'red'

Og nu bredden:

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

Og nu skriftstørrelsen:

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

Følgende stilarter er defineret for elementet:

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

Ved klik på knappen, udskriv elementets bredde og højde.

Følgende stilarter er defineret for elementet:

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

Ved klik på knappen, forøg elementets bredde og højde med det dobbelte.