Čitanje svojstava iz CSS fajlova u JavaScript

Svojstva postavljena u CSS fajlu mogu se pročitati pomoću posebne funkcije getComputedStyles.

Hajde da pogledamo kako se to radi. Recimo da imamo sledeći element:

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

Neka su za ovaj element zadati sledeći stilovi:

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

Dobijamo referencu na element u promenljivu:

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

Sada prosledimo referencu na dobijeni element kao parametar funkcije getComputedStyles:

javascript let computedStyle = getComputedStyle(elem);

Kao rezultat ćemo dobiti objekat koji sadrži vrednosti CSS svojstava za naš element. Hajde da pomoću njega pročitamo, na primer, boju:

javascriptconsole.log(computedStyle.color); // ispisaće 'red'

A sada širinu:

javascriptconsole.log(computedStyle.width); // ispisaće '100px'

A sada veličinu fonta:

javascriptconsole.log(computedStyle.fontSize); // ispisaće '20px'

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

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