Odczyt właściwości z plików CSS w JavaScript

Właściwości zdefiniowane w pliku CSS można odczytać za pomocą specjalnej funkcji getComputedStyles.

Spójrzmy, jak to się robi. Załóżmy, że mamy następujący element:

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

Załóżmy, że dla tego elementu zdefiniowane są następujące style:

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

Pobierzmy referencję do elementu do zmiennej:

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

Teraz przekażmy referencję do pobranego elementu jako parametr funkcji getComputedStyles:

let computedStyle = getComputedStyle(elem);

W rezultacie otrzymamy obiekt, zawierający wartości właściwości CSS dla naszego elementu. Odczytywanie za jego pomocą, na przykład, koloru:

console.log(computedStyle.color); // wypisze 'red'

A teraz szerokość:

console.log(computedStyle.width); // wypisze '100px'

A teraz rozmiar czcionki:

console.log(computedStyle.fontSize); // wypisze '20px'

Dla elementu zdefiniowane są następujące style:

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

Po kliknięciu przycisku wypisz szerokość i wysokość elementu.

Dla elementu zdefiniowane są następujące style:

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

Po kliknięciu przycisku zwiększ dwukrotnie szerokość i wysokość elementu.