Хосиятҳоро аз файлҳои 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;
}

Бо клик кардан ба тугма паҳноӣ ва баландии элементро ду баробар зиёд кунед.