CSS-i failidest omaduste lugemine JavaScriptis

CSS-i failis määratud omadusi saab lugeda spetsiaalse funktsiooni getComputedStyles abil.

Vaatame, kuidas seda tehakse. Olgem meil järgmine element:

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

Olgu selle elemendi jaoks määratud järgmised stiilid:

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

Hankime viite elemendile muutujasse:

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

Nüüd edastame saadud elemendi viite parameetrina funktsioonile getComputedStyles:

javascript let computedStyle = getComputedStyle(elem);

Tulemuseks saame objekti, mis sisaldab meie elemendi CSS-omaduste väärtusi. Loeme selle abil näiteks värvi:

javascriptconsole.log(computedStyle.color); // väljastab 'red'

Ja nüüd laiuse:

javascriptconsole.log(computedStyle.width); // väljastab '100px'

Ja nüüd fondi suuruse:

javascriptconsole.log(computedStyle.fontSize); // väljastab '20px'

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

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