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:

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

Katakan untuk elemen ini ditetapkan gaya berikut:

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

Dapatkan rujukan kepada elemen dalam pembolehubah:

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

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

javascript let computedStyle = getComputedStyle(elem);

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

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

Dan sekarang lebarnya:

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

Dan sekarang saiz fon:

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

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

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