Metode Window getComputedStyle()

Definisi dan penggunaan

getComputedStyle() Metode ini mengambil properti 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 semua sumber gaya digunakan.

Sumber gaya: gaya eksternal dan internal tabel, gaya yang disesuaikan dan gaya baku 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 Diperlukan. Elemen yang akan mendapatkan gaya yang dihitung.
pseudoElement Pilihan. Pseudo-element yang akan didapatkan.

Kembalian nilai

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

Perbedaan antara metode getComputedStyle() dan properti style

Bandingkan metode getComputedStyle() dengan properti style HTMLElement: yang terakhir hanya mengijinkan akses ke gaya inline elemen, dapat digunakan dengan setiap satuan yang Anda tentukan, dan, tidak dapat memberitahu 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