Auslesen von Eigenschaften aus CSS-Dateien in JavaScript

Eigenschaften, die in einer CSS-Datei definiert sind, können mit einer speziellen Funktion getComputedStyles ausgelesen werden.

Lassen Sie uns sehen, wie das gemacht wird. Nehmen wir an, wir haben das folgende Element:

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

Nehmen wir an, für dieses Element sind die folgenden Stile definiert:

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

Holen wir uns eine Referenz auf das Element in eine Variable:

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

Übergeben wir nun die Referenz auf das erhaltene Element als Parameter an die Funktion getComputedStyles:

let computedStyle = getComputedStyle(elem);

Als Ergebnis erhalten wir ein Objekt, das die Werte der CSS-Eigenschaften für unser Element enthält. Lassen Sie uns damit zum Beispiel die Farbe auslesen:

console.log(computedStyle.color); // gibt 'red' aus

Und nun die Breite:

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

Und nun die Schriftgröße:

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

Für das Element sind die folgenden Stile definiert:

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

Geben Sie bei einem Klick auf den Button die Breite und Höhe des Elements aus.

Für das Element sind die folgenden Stile definiert:

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

Verdoppeln Sie bei einem Klick auf den Button die Breite und Höhe des Elements.