Window getComputedStyle() Metodu

tanım ve kullanım

getComputedStyle() yöntem HTML elemanının hesaplanmış CSS özelliklerini ve değerlerini alır.

getComputedStyle() yöntem CSSStyleDeclaration nesnesi döner.

Hesaplanmış stiller

Hesaplanmış stiller, tüm stil kaynakları uygulandıktan sonra eleman üzerinde kullanılan stillerdir.

Stil kaynağı: dış ve iç stil dizgileri, miras edilen stiller ve tarayıcı varsayılan stilleri.

daha fazla bilgi için bkz:

CSSStyleDeclaration nesnesi

örnek

örnek 1

Elemmanın hesaplanmış arka plan rengini alın:

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");

kişisel olarak deneyin

örnek 2

Tüm hesaplanmış stilleri elemanından 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>";
}

kişisel olarak deneyin

örnek 3

Elemmanın ilk harfinin hesaplanmış yazı boyutunu (sahte element kullanarak) alın:

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

kişisel olarak deneyin

gramer

window.getComputedStyle(element, pseudoElement)

parametre

parametre tanım
element zorunlu. Kalkıtılan stilleri almak için element.
pseudoElement isteğe bağlı. Almak istediğiniz sahte element.

geri dönüş değeri

tür tanım
nesne CSS özellikleri ve değerlerinin hepsine sahip CSSStyleDeclaration nesnesi.

getComputedStyle() yöntemi ile style özelliğinin arasındaki fark

getComputedStyle() yöntemini HTMLElement'in style özelliği ile karşılaştırın: bu, sadece elemmanın satır içi stillerine erişim izni verir, belirttiğiniz herhangi bir birim kullanılabilir ve, elemmanın stil dizgisi stillerine uygulanan herhangi bir bilgiyi size söylemez.

Tarayıcı desteği

Tüm tarayıcılar destekler getComputedStyle()：

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