CSS fayllarından xassələrin JavaScript-də oxunması

CSS faylında təyin olunmuş xassələri getComputedStyles xüsusi funksiyası vasitəsilə oxumaq olar.

Gəlin görək bu necə edilir. Tutaq ki, bizim aşağıdakı elementimiz var:

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

Tutaq ki, bu element üçün aşağıdakı stillər təyin olunub:

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

Gəlin elementə istinadı dəyişəndə əldə edək:

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

İndi isə əldə olunmuş elementə istinadı getComputedStyles funksiyasının parametri kimi ötürək:

let computedStyle = getComputedStyle(elem);

Nəticədə biz elementimiz üçün CSS xassələrinin qiymətlərini ehtiva edən bir obyekt alacağıq. Gəlin onun vasitəsilə, məsələn, rəngi oxuyaq:

console.log(computedStyle.color); // 'red' çap edəcək

İndi isə eni:

console.log(computedStyle.width); // '100px' çap edəcək

İndi isə şrift ölçüsünü:

console.log(computedStyle.fontSize); // '20px' çap edəcək

Element üçün aşağıdakı stillər təyin olunub:

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

Düyməyə kliklənildikdə elementin enini və hündürlüyünü çap edin.

Element üçün aşağıdakı stillər təyin olunub:

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

Düyməyə kliklənildikdə elementin enini və hündürlüyünü iki dəfə artırın.