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:

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

Misalkan untuk elemen ini ditentukan gaya berikut:

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

Dapatkan referensi ke elemen dalam variabel:

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

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

javascript let computedStyle = getComputedStyle(elem);

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

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

Dan sekarang lebarnya:

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

Dan sekarang ukuran font:

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

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

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