Pencere getComputedStyle()
Örnek
Bir öğenin hesaplanan arka plan rengini alın:
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
Aşağıda daha fazla örnek.
Tanım ve Kullanım
Yöntem getComputedStyle()
, bir HTML öğesinin hesaplanan CSS özelliklerini ve değerlerini alır.
Yöntem getComputedStyle()
bir döndürür
CSSStyleDeclaration object
.
Hesaplanan Stil
Hesaplanan stil, tüm stil kaynakları uygulandıktan sonra öğede kullanılan stildir.
Stil kaynakları: harici ve dahili stil sayfaları, devralınan stiller ve tarayıcı varsayılan stilleri.
Ayrıca bakınız:
Sözdizimi
window.getComputedStyle(element, pseudoElement)
parametreler
Parameter | Description |
element | Required. The element to get the computed style for. |
pseudoElement | Optional. A pseudo-element to get. |
Geri dönüş değeri
Tip | Açıklama |
Bir obje | Öğenin tüm CSS özelliklerine ve değerlerine sahip bir CSSStyleDeclaration nesnesi. |
Daha fazla örnek
Bir öğeden tüm hesaplanan stilleri alın:
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>";
}
Bir öğedeki ilk harfin hesaplanan yazı tipi boyutunu alın (sözde öğe kullanarak):
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");
Tarayıcı Desteği
getComputedStyle()
tüm tarayıcılarda desteklenir:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |