Membaca Properti dari File CSS di JavaScript

Properti yang ditentukan dalam file CSS dapat dibaca menggunakan fungsi khusus getComputedStyles.

Mari kita lihat bagaimana cara melakukannya. Misalkan kita memiliki elemen berikut:

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

Misalkan untuk elemen ini ditentukan gaya berikut:

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

Dapatkan referensi ke elemen dalam variabel:

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

Sekarang berikan referensi ke elemen yang diperoleh sebagai parameter fungsi getComputedStyles:

let computedStyle = getComputedStyle(elem);

Hasilnya, kita akan mendapatkan objek yang berisi nilai properti CSS untuk elemen kita. Mari menggunakannya untuk membaca, misalnya, warna:

console.log(computedStyle.color); // akan menampilkan 'red'

Dan sekarang lebarnya:

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

Dan sekarang ukuran font:

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

Untuk elemen ditentukan gaya berikut:

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

Pada klik tombol, tampilkan lebar dan tinggi elemen.

Untuk elemen ditentukan gaya berikut:

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

Pada klik tombol, tingkatkan lebar dan tinggi elemen dua kali lipat.