Funkcija getComputedStyle

Funkcija getComputedStyle ļauj iegūt jebkuras CSS īpašības vērtību elementam, pat no CSS faila.

Sintakse

let objekts = getComputedStyle(elements);

Detaļas

Kā tas darbojas (uzmanību: ne tā, kā mēs gaidām): parametrā funkcija pieņem elementu, un atgriež objektu, kas satur sevī visas CSS īpašības padotajam elementam. Ieliksim šo objektu mainīgajā style. Nosaukums ir patvaļīgs, tas vienkārši ir mainīgais - kā izdomāsim, tā arī piekļūsim:

let elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style atrodas CSS īpašības

Izvadīsim, piemēram, platumu. Tas tiek darīts šādi - style.width:

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

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

Lai izvadītu, piemēram, kreiso padding - darām šādi - style.paddingLeft:

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

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

Nākamajā piemērā mēs izvadīsim visas mūs interesējošās CSS īpašības mūsu elementam:

<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); // izvadīs '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // izvadīs '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // izvadīs 'solid'

getComputedStyle neprecizitāte

Dažreiz funkcija getComputedStyle strādā ne gluži korekti ar platumu un augstumu. Tas ir saistīts ar to, ka padding un apmale paplašina bloku. Nākamajā piemērā blokam ir iestatīts platums 200px, kā arī apmale un border. Reālais bloka platums 300px, bet getComputedStyle tik un tā izvadīs 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); // izvadīs '200px'
console.log('height: ' + style.height); // izvadīs '200px'

Tas ir: iznāk, ka getComputedStyle ignorē bloka paplašināšanos un rāda tā izmērus tā, it kā šī paplašināšanās nebūtu bijusi. Bet tas vēl nav viss: arī nozīme ir, vai ir ritjosla vai nav - daži pārlūkprogrammas atņem ritjoslas platumu no platuma, kas aprēķināts caur getComputedStyle, bet daži neatņem. Kopumā šeit vispār viss nav starppārlūkprogrammu un labāk getComputedStyle platuma un augstuma noteikšanai neizmantot, bet izmantot metrikas, kuras mēs apgūsim mazliet vēlāk.

Aprēķinātās vērtības

Ir vēl viena nianse: ja platums ir iestatīts % - tad pēc getComputedStyle darbības mēs redzēsim to px. Tas ir būtībā mēs iegūstam ne iestatīto platumu, bet aprēķināto. Skatieties nākamajā piemērā:

<div id="elem">text</div>

#elem {
	width: 30%; /* platums iestatīts % */
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // izvadīs platumu px

Skatieties arī

īpašība cssText,
kas masīvi iestata CSS stilus