Venster getComputedStyle()
Voorbeeld
Kry die berekende agtergrondkleur van 'n element:
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
Meer voorbeelde hieronder.
Definisie en gebruik
Die getComputedStyle()
metode kry die berekende CSS-eienskappe en waardes van 'n HTML-element.
Die getComputedStyle()
metode gee 'n terug
CSSStyleDeclaration object
.
Rekenaarstyl
Die berekende styl is die styl wat op die element gebruik word nadat alle stileringsbronne toegepas is.
Stylbronne: eksterne en interne stylblaaie, oorgeërfde style en blaaier verstekstyle.
Sien ook:
Sintaksis
window.getComputedStyle(element, pseudoElement)
Grense
Parameter | Description |
element | Required. The element to get the computed style for. |
pseudoElement | Optional. A pseudo-element to get. |
Terugkeerwaarde
Tik | Beskrywing |
'n Voorwerp | 'n CSSStyleDeclaration-voorwerp met al die CSS-eienskappe en waardes van die element. |
Meer voorbeelde
Kry al die berekende style van 'n element:
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>";
}
Kry berekende lettergrootte van die eerste letter in 'n element (met pseudo-element):
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");
Blaaierondersteuning
getComputedStyle()
word in alle blaaiers ondersteun:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |