CSS failų savybių skaitymas JavaScript

Savybes, nustatytas CSS faile, galima nuskaityti naudojant specialią funkciją getComputedStyles.

Pažiūrėkime, kaip tai daroma. Tarkime, kad turime šį elementą:

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

Tarkime, kad šiam elementui yra nustatyti šie stiliai:

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

Gaukime nuorodą į elementą kintamajame:

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

Dabar perduokime nuorodą į gautą elementą kaip parametrą funkcijai getComputedStyles:

javascript let computedStyle = getComputedStyle(elem);

Rezultate gausime objektą, kuriame yra CSS savybių reikšmės mūsų elementui. Perskaitykime jo pagalba, pavyzdžiui, spalvą:

javascriptconsole.log(computedStyle.color); // išves 'red'

O dabar plotį:

javascriptconsole.log(computedStyle.width); // išves '100px'

O dabar šrifto dydį:

javascriptconsole.log(computedStyle.fontSize); // išves '20px'

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

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