Funcția getComputedStyle

Funcția getComputedStyle permite obținerea valorii oricărei proprietăți CSS a unui element, chiar și din fișierul CSS.

Sintaxă

let obiect = getComputedStyle(element);

Detalii

Cum funcționează (atenție: nu cum ne așteptăm): ca parametru funcția primește elementul, și returnează un obiect, care conține în sine toate proprietățile CSS ale elementului transmis. Să punem acest obiect într-o variabilă style. Denumirea este arbitrară, aceasta este doar o variabilă - cum o vom concepe, așa ne vom adresa:

let elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // în style se află proprietățile CSS

Să afișăm, de exemplu, lățimea. Aceasta se face așa - style.width:

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

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

Pentru a afișa, de exemplu, padding-ul stâng - facem așa - style.paddingLeft:

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

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

În următorul exemplu vom afișa toate proprietățile CSS care ne interesează pentru elementul nostru:

<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); // va afișa '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // va afișa '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // va afișa 'solid'

Imprecizia getComputedStyle

Uneori funcția getComputedStyle funcționează nu tocmai corect cu lățimea și înălțimea. Aceasta se datorează faptului că padding și bordura expandă blocul. În următorul exemplu blocului îi este atribuită lățimea 200px, precum și bordură și border. Lățimea reală a blocului este 300px, dar getComputedStyle va afișa oricum 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); // va afișa '200px'
console.log('height: ' + style.height); // va afișa '200px'

Adică: se dovedește că getComputedStyle ignoră expandarea blocului și îi arată dimensiunile așa cum și le-ar fi avut fără această expandare. Dar asta nu e tot: de asemenea, contează prezența sau absența barei de derulare - unele browsere scad lățimea barei de derulare din lățimea calculată prin getComputedStyle, iar altele nu o scad. Pe scurt, aici în general totul este non-cross-browser și este mai bine să nu folosiți getComputedStyle pentru determinarea lățimii și înălțimii, ci să utilizați metricile pe care le vom studia puțin mai jos.

Valori calculate

Mai există o nuanță: dacă lățimea este stabilită în % - atunci după funcționarea getComputedStyle vom vedea aceasta în px. Adică, în esență, noi primim nu lățimea stabilită, ci pe cea calculată. Uitați-vă la următorul exemplu:

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

#elem {
	width: 30%; /* lățimea stabilită în % */
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // va afișa lățimea în px

Vedeți și

proprietatea cssText,
care stabilește în masă stilurile CSS