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

Түймесін басқанда элементтің ені мен биіктігін екі есеге арттырыңыз.