CSS файлдарынан касиеттерди JavaScript менен окуу

CSS файлында белгиленген касиеттерди getComputedStyles атайын функциясынын жардамы менен окууга болот.

Буну кантип жасоону карап көрөлү. Бизде төмөнкү элемент бар деп коёлу:

html<div id="elem">
  текст
</div>

Бул элемент үчүн төмөнкү стилдер белгиленсин:

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

Элементке шилтемени өзгөрмөгө алалы:

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

Эми алынган элементке болгон шилтемени getComputedStyles функциясынын параметри катары беребиз:

javascript let computedStyle = getComputedStyle(elem);

Натыйжада биз элемент үчүн CSS касиеттеринин маанилерин камтыган объект алабыз. Анын жардамы менен, мисалы, түстү окуп көрөлү:

javascriptconsole.log(computedStyle.color); // 'red' деп чыгарат

Эми туурасын:

javascriptconsole.log(computedStyle.width); // '100px' деп чыгарат

Эми шрифттин өлчөмүн:

javascriptconsole.log(computedStyle.fontSize); // '20px' деп чыгарат

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

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