Terkadang, kita mungkin ingin mendapatkan nilai properti CSS dari sebuah elemen dengan JavaScript.

Pada artikel ini, kita akan melihat cara mendapatkan nilai properti CSS dari sebuah elemen dengan JavaScript.

Gunakan metode window.getComputedStyle

Kita dapat menggunakan window,getComputedStylemetode untuk mendapatkan gaya CSS yang dihitung dari suatu elemen.

Misalnya, jika kita memiliki HTML berikut:

<div style='height: 300px; overflow-y: auto'>
</div>

const div = document.querySelector('div')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  div.appendChild(p)
}
const style = window.getComputedStyle(div);
const height = style.getPropertyValue('height');
console.log(height)

Kami memiliki forloop untuk menambahkan 100 pelemen ke dalam div dengan document.createElement.

Kemudian kami mengatur textContentsetiap elemen untuk menambahkan beberapa konten.

Dan kemudian kita memanggil div.appendChilduntuk menambahkan pelemen sebagai anak dari div.

Selanjutnya, kita panggil window.getComputedStyledengan divuntuk mendapatkan styleobjek.

Dan kemudian kita bisa mendapatkan heightproperti dengan:

const height = style.getPropertyValue('height');

Gunakan Metode ComputedStyleMap Elemen

Selain itu, kita dapat menggunakan computedStyleMapmetode yang disertakan dengan elemen untuk menerapkan gaya ke elemen.

Misalnya, kami memiliki HTML berikut:

<div style='height: 300px; overflow-y: auto'>
</div>

const div = document.querySelector('div')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  div.appendChild(p)
}
const style = div.computedStyleMap();
const height = style.get('height');
console.log(height)

Kemudian kita panggil div.computedStyleMapuntuk mendapatkan styleobjek yang bisa kita gunakan untuk mendapatkan gaya.

Dan kemudian kita memiliki:

const height = style.get('height');

Kali ini heightseharusnya:

{value: 300, unit: "px"}

Kesimpulan

Ada beberapa cara yang bisa kita gunakan untuk mendapatkan properti CSS dari elemen dengan JavaScript.

Lebih banyak konten di plainenglish.io