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 хусусиятларининг қийматларини ўз ичига олган объект ҳосил бўлади. Ундан, масалан, рангни ўқиш учун foydalanaylik:

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;
}

Тугмача босилганда элементнинг эни ва бўйини икки баробарга оширинг.