getComputedStyle функцияси

getComputedStyle функцияси элементнинг istalgan 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">text</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 барibir 200px ни чиқаради:

<div id="elem">text</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">text</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 стилларни оммовий равишда белгилайди