getComputedStyle функциясы

getComputedStyle функциясы элементтің кез келген CSS қасиетінің мәнін алуға мүмкіндік береді, тіпті CSS файлынан да.

Синтаксис

let объект = getComputedStyle(элемент);

Толығырақ

Ол қалай жұмыс істейді (назар аударыңыз: біз күткендей емес): функция параметр ретінде элементті қабылдайды, ал берілген элементтің барлық CSS қасиеттерін қамтитын нысанды қайтарады. Бұл нысанды style айнымалысына салайық. Атауы ерікті, бұл жай ғана айнымалы - біз қалай ойлап тапсақ, солай жүргіземіз:

let elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style-да CSS қасиеттері бар

Мысалы, енін шығарайық. Бұл style.width арқылы жасалады:

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

let style = getComputedStyle(elem);
console.log(style.width);

Мысалы, сол padding шығару үшін - style.paddingLeft деп жасаймыз:

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

let style = getComputedStyle(elem);
console.log(style.paddingLeft);

Келесі мысалда біз элемент үшін бізді қызықтыратын барлық CSS қасиеттерін шығарамыз:

<div id="elem">мәтін</div>

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('paddingLeft: ' + style.paddingLeft); // '30px' шығарады
console.log('borderTopWidth: ' + style.borderTopWidth); // '20px' шығарады
console.log('borderTopStyle: ' + style.borderTopStyle); // 'solid' шығарады

getComputedStyle дәлсіздігі

Кейде getComputedStyle функциясы енімен және биіктікпен толық дұрыс жұмыс істемейді. Бұл padding және шекара блокты кеңейтуіне байланысты. Келесі мысалда блокқа 200px ені, сондай-ақ шекара және border берілген. Блоктың нақты ені 300px, бірақ getComputedStyle бәрібір 200px шығарады:

<div id="elem">мәтін</div>

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // '200px' шығарады
console.log('height: ' + style.height); // '200px' шығарады

Яғни: getComputedStyle блоктың кеңеюін елемейді және оның өлшемдерін бұл кеңею болмағандай көрсетеді. Бірақ бұл әлі бәрі емес: айналмалы жолақтың болуы да маңызды - кейбір браузерлер айналмалы жолақтың енін getComputedStyle арқылы есептелген еннен алып тастайды, ал кейбірі алып тастамайды. Жалпы, мұнда бәрі кроссбраузерлік емес және ені мен биіктігін анықтау үшін getComputedStyle қолданбаған дұрыс, ал біз сәл әлгіреу зерттейтін метрикаларды пайдалану керек.

Есептелген мәндер

Тағы бір нюанс бар: егер ен %-пен берілген болса - getComputedStyle жұмыс істегеннен кейін біз оны px-те көреміз. Яғни, мәнінде біз берілген ен емес, есептелген ен аламыз. Келесі мысалды қараңыз:

<div id="elem">мәтін</div>

#elem {
	width: 30%; /* ен %-пен берілген */
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // ен px-те шығарады

Сондай-ақ қараңыз

cssText қасиеті,
ол CSS стильдерін біріктіріп береді