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:

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

Faraz qilaylik, ushbu element uchun quyidagi uslublar belgilangan:

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

Elementga havolani o'zgaruvchiga olaylik:

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

Endi olingan elementga havolani getComputedStyles funksiyasining parametri sifatida uzatamiz:

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:

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

Endi kenglikni:

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

Endi shrift hajmini:

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

Element uchun quyidagi uslublar belgilangan:

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

Tugmachani bosishda elementning kengligi va balandligini chiqaring.

Element uchun quyidagi uslublar belgilangan:

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

Tugmachani bosishda elementning kengligi va balandligini ikki baravar oshiring.