Läsa egenskaper från CSS-filer i JavaScript

Egenskaper som anges i en CSS-fil kan läsas med hjälp av en speciell funktion getComputedStyles.

Låt oss se hur detta görs. Antag att vi har följande element:

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

Antag att följande stilar är angivna för detta element:

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

Låt oss hämta en referens till elementet i en variabel:

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

Nu skickar vi referensen till det erhållna elementet som en parameter till funktionen getComputedStyles:

let computedStyle = getComputedStyle(elem);

Som ett resultat får vi ett objekt som innehåller värdena för CSS-egenskaperna för vårt element. Låt oss använda det för att läsa, till exempel, färgen:

console.log(computedStyle.color); // kommer att skriva ut 'red'

Och nu bredden:

console.log(computedStyle.width); // kommer att skriva ut '100px'

Och nu teckenstorleken:

console.log(computedStyle.fontSize); // kommer att skriva ut '20px'

Följande stilar är angivna för elementet:

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

Vid klick på knappen, skriv ut bredden och höjden på elementet.

Följande stilar är angivna för elementet:

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

Vid klick på knappen, öka bredden och höjden på elementet till det dubbla.