Metoden Window getComputedStyle()

  • Halaman sebelumnya
  • Halaman berikutnya
  • Kembali ke tingkat atas Objek Window

Definisi dan penggunaan

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

getComputedStyle() Kaedah mengembalikan objek CSSStyleDeclaration.

Gaya dihitung

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

Sumber gaya: latar belakang luar dan dalaman, gaya warisan dan gaya lalai pelayar.

Lihat juga:

Objek CSSStyleDeclaration

Contoh

Contoh 1

Dapatkan warna latar belakang 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 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 di 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

Sintaks

window.getComputedStyle(element, pseudoElement)

Parameter

Parameter Deskripsi
element Diperlukan. Elemen yang hendak didapatkan gaya dihitung untuknya.
pseudoElement Pilihan. Pseudo-element yang hendak didapatkan.

Hasil balik

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

Perbezaan antara kaedah getComputedStyle() dan properti style

Bandingkan kaedah getComputedStyle() dengan properti style HTMLElement: yang terakhir hanya memungkinkan akses ke gaya baris dalam elemen, boleh digunakan mana-mana unit yang dikehendaki, dan, tak dapat memberitahu mana-mana informasi tentang gaya yang diaplikasikan ke gaya dalam daftar 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
  • Halaman sebelumnya
  • Halaman berikutnya
  • Kembali ke tingkat atas Objek Window