Jendela getComputedStyle()
Contoh
Dapatkan warna latar belakang elemen yang dihitung:
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
Lebih banyak contoh di bawah ini.
Definisi dan Penggunaan
Metode getComputedStyle()
ini mendapatkan properti dan nilai CSS yang dihitung dari elemen HTML.
Metode getComputedStyle()
mengembalikan a
CSSStyleDeclaration object
.
Gaya Terhitung
Gaya yang dihitung adalah gaya yang digunakan pada elemen setelah semua sumber gaya diterapkan.
Sumber gaya: lembar gaya eksternal dan internal, gaya bawaan, dan gaya default browser.
Lihat juga:
Sintaksis
window.getComputedStyle(element, pseudoElement)
Parameter
Parameter | Description |
element | Required. The element to get the computed style for. |
pseudoElement | Optional. A pseudo-element to get. |
Nilai Kembali
Jenis | Keterangan |
Sebuah Objek | Objek CSSStyleDeclaration dengan semua properti CSS dan nilai elemen. |
Lebih Banyak Contoh
Dapatkan semua gaya yang dihitung dari sebuah 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>";
}
Dapatkan ukuran font yang dihitung dari huruf pertama dalam suatu elemen (menggunakan elemen semu):
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");
Dukungan Peramban
getComputedStyle()
didukung di semua browser:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |