CSS fayllaridan xossalarni JavaScriptda o'qish

CSS faylida belgilangan xossalarni getComputedStyles maxsus funksiyasi yordamida o'qish mumkin.

Keling, buni qanday qilinishini ko'rib chiqaylik. Faraz qilaylik, bizda quyidagi element mavjud:

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

Faraz qilaylik, ushbu element uchun quyidagi uslublar belgilangan:

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

Elementga havolani o'zgaruvchiga olaylik:

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

Endi olingan elementga havolani getComputedStyles funksiyasining parametri sifatida uzatamiz:

javascript let computedStyle = getComputedStyle(elem);

Natijada biz o'zimizning elementimiz uchun CSS xossalari qiymatlarini o'z ichiga olgan obyektni olamiz. Keling, uning yordamida, masalan, rangni o'qiymiz:

javascriptconsole.log(computedStyle.color); // 'red' ni chiqaradi

Endi kenglikni:

javascriptconsole.log(computedStyle.width); // '100px' ni chiqaradi

Endi shrift hajmini:

javascriptconsole.log(computedStyle.fontSize); // '20px' ni chiqaradi

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

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