Функсияи 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-ро фаровон таъин мекунад