Branjenje lastnosti iz CSS datotek v JavaScriptu

Lastnosti, določene v CSS datoteki, lahko preberemo s pomočjo posebne funkcije getComputedStyles.

Poglejmo, kako se to naredi. Recimo, da imamo naslednji element:

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

Recimo, da so za ta element določeni naslednji slogi:

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

Pridobimo referenco na element v spremenljivko:

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

Zdaj posredujmo referenco na pridobljeni element kot parameter funkcije getComputedStyles:

javascript let computedStyle = getComputedStyle(elem);

Kot rezultat bomo dobili objekt, ki vsebuje vrednosti CSS lastnosti za naš element. Preberimo z njegovo pomočjo, na primer, barvo:

javascriptconsole.log(computedStyle.color); // izpiše 'red'

In zdaj širino:

javascriptconsole.log(computedStyle.width); // izpiše '100px'

In zdaj velikost pisave:

javascriptconsole.log(computedStyle.fontSize); // izpiše '20px'

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

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