Membaca Sifat daripada Fail CSS dalam JavaScript

Sifat yang ditetapkan dalam fail CSS boleh dibaca menggunakan fungsi khas getComputedStyles.

Mari kita lihat bagaimana ia dilakukan. Katakan kita mempunyai elemen berikut:

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

Katakan untuk elemen ini ditetapkan gaya berikut:

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

Dapatkan rujukan kepada elemen dalam pembolehubah:

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

Sekarang hantarkan rujukan kepada elemen yang diperoleh sebagai parameter fungsi getComputedStyles:

let computedStyle = getComputedStyle(elem);

Hasilnya, kita akan mendapat objek yang mengandungi nilai sifat CSS untuk elemen kita. Mari menggunakannya untuk membaca, contohnya, warna:

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

Dan sekarang lebarnya:

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

Dan sekarang saiz fon:

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

Untuk elemen ditetapkan gaya berikut:

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

Pada klik butang, outputkan lebar dan tinggi elemen.

Untuk elemen ditetapkan gaya berikut:

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

Pada klik butang, besarkan lebar dan tinggi elemen dua kali ganda.