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

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

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

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

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

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

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

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

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

let computedStyle = getComputedStyle(elem);

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

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

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

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

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

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

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

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

Баскычты чыкылдатканда, элементтин туурасын жана бийиктигин чыгарыңыз.

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

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

Баскычты чыкылдатканда, элементтин туурасын жана бийиктигин эки эсе көбөйтүңүз.