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 стилдерди массалык түрдө белгилейт