CSS-i failidest omaduste lugemine JavaScriptis

CSS-i failis määratud omadusi saab lugeda spetsiaalse funktsiooni getComputedStyles abil.

Vaatame, kuidas seda tehakse. Olgem meil järgmine element:

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

Olgu selle elemendi jaoks määratud järgmised stiilid:

#elem {
	width: 100px;
	color: red;
	font-size: 20px;
}

Hankime viite elemendile muutujasse:

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

Nüüd edastame saadud elemendi viite parameetrina funktsioonile getComputedStyles:

let computedStyle = getComputedStyle(elem);

Tulemuseks saame objekti, mis sisaldab meie elemendi CSS-omaduste väärtusi. Loeme selle abil näiteks värvi:

console.log(computedStyle.color); // väljastab 'red'

Ja nüüd laiuse:

console.log(computedStyle.width); // väljastab '100px'

Ja nüüd fondi suuruse:

console.log(computedStyle.fontSize); // väljastab '20px'

Elemendi jaoks on määratud järgmised stiilid:

#elem {
	width: 200px;
	height: 200px;
}

Nupule klõpsates väljastage elemendi laius ja kõrgus.

Elemendi jaoks on määratud järgmised stiilid:

#elem {
	width: 200px;
	height: 200px;
}

Nupule klõpsates suurendage elemendi laiust ja kõrgust kahe korra.