Читање на својства од CSS датотеки во JavaScript

Својствата зададени во CSS датотеката, може да се прочитаат со помош на специјална функција getComputedStyles.

Ајде да погледнеме како се прави ова. Да претпоставиме дека го имаме следниот елемент:

<div id="elem">
	text
</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;
}

При клик на копчето зголемете ја ширината и висината на елементот за два пати.