Method Window getComputedStyle()

Pengartian dan penggunaan

getComputedStyle() Kaedah mendapatkan properti dan nilai CSS yang dihitung HTML elemen.

getComputedStyle() Kaedah mengembalikan objek CSSStyleDeclaration.

Gaya yang dihitung

Gaya yang dihitung merujuk kepada gaya yang digunakan di atas elemen selepas disebabkan semua sumber gaya.

Sumber gaya: gaya luaran dan dalaman, gaya yang diwarisi dan gaya latar belakang bawaan pelayar.

Lihat juga:

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");

Cuba sendiri

Contoh 2

Dapatkan semua gaya yang dihitung daripada 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>";
}

Cuba sendiri

Contoh 3

Dapatkan saiz huruf pertama yang dihitung dalam elemen (menggunakan pseudo-element):

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

Cuba sendiri

Syarat

window.getComputedStyle(element, pseudoElement)

Parameter

Parameter Penerangan
element Wajib. Elemen yang akan mendapatkan gaya yang dihitung.
pseudoElement Pilihan. Untuk mendapatkan pseudo-element yang dikehendaki.

Kembalian

Jenis Penerangan
Objek Objek CSSStyleDeclaration yang mempunyai semua properti dan nilai CSS elemen.

Perbezaan kaedah getComputedStyle() dengan properti style

Bandingkan kaedah getComputedStyle() dengan properti style HTMLElement: belakang hanya membenarkan akses ke gaya lini elemen, boleh digunakan mana-mana unit yang dikehendaki, dan, tidak dapat memberitahu apa yang disebabkan ke gaya latar belakang yang diaplikasikan ke latar belakang gaya elemen.

Pendukung pelayar

Semua pelayar mendukung getComputedStyle():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan 9-11 Dukungan Dukungan Dukungan Dukungan