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:

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

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

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

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

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

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

javascript 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:

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

Und nun die Breite:

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

Und nun die Schriftgröße:

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

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

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