Metode Window getComputedStyle()

  • Halaman Sebelumnya
  • Halaman Berikutnya
  • Kembali ke Lapisan Atas Objek Window

Definisi dan penggunaan

getComputedStyle() Metode ini mengambil atribut dan nilai CSS yang dihitung elemen HTML.

getComputedStyle() Metode ini mengembalikan objek CSSStyleDeclaration.

Gaya yang dihitung

Gaya yang dihitung adalah gaya yang digunakan di elemen setelah diaplikasikan semua sumber gaya.

Sumber gaya: gaya eksternal dan internal tabel, gaya yang diturunkan dan gaya standar browser.

Lihat pula:

Objek CSSStyleDeclaration

Contoh

Contoh 1

Dapatkan warna latar belakang yang dihitung elemen:

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");

Coba sendiri

Contoh 2

Dapatkan semua gaya yang dihitung dari elemen:

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let text = "";
for (x in cssObj) {
  cssObjProp = cssObj.item(x)
  text += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}

Coba sendiri

Contoh 3

Dapatkan ukuran font yang dihitung untuk huruf pertama elemen (menggunakan pseudo-element):

const element = document.getElementById("test"); const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");

Coba sendiri

Sintaks

window.getComputedStyle(element, pseudoElement)

Parameter

Parameter Deskripsi
element Wajib. Elemen yang akan mendapatkan gaya yang dihitung.
pseudoElement Pilihan. Pseudo-element yang akan didapatkan.

Nilai kembalian

Tipe Deskripsi
Objek Objek CSSStyleDeclaration yang memiliki semua properti dan nilai CSS elemen.

Perbedaan antara metode getComputedStyle() dengan properti style

Bandingkan metode getComputedStyle() dengan properti style HTMLElement: properti terakhir hanya mengizinkan akses ke gaya inline elemen, dapat digunakan unit yang disebutkan kapan saja, dan, tidak dapat memberikan informasi tentang gaya yang diaplikasikan ke gaya tabel elemen.

Dukungan peramban

Semua peramban mendukung getComputedStyle()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan 9-11 Dukungan Dukungan Dukungan Dukungan
  • Halaman Sebelumnya
  • Halaman Berikutnya
  • Kembali ke Lapisan Atas Objek Window