Methodi Window getComputedStyle()

Ufafanuzi na matumizi

getComputedStyle() Method inafikia hatua ya mifano ya CSS ya kifungu cha HTML.

getComputedStyle() Method inatuma kampuni ya CSSStyleDeclaration.

Hatua ya mifano

Hatua ya mifano inaelewa kama hatua ya kifungu inayotumiwa baada ya kufikia mifano ya kila chanzo.

Marejeo ya stili: Mifano ya kifungu na mifano ya kifungu, stili ya kumuwinda na stili ya kufikia kwa msingi wa kifungu.

Tazama pia:

CSSStyleDeclaration muhimu

Mfano

Mfano 1

Kufikia hatua ya mifano ya mabaki ya kifungu:

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

Mtafiti mwenyewe

Mfano 2

Kufikia hatua ya mifano kwa kifungu:

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>";
}

Mtafiti mwenyewe

Mfano 3

Kufikia hatua ya mifano ya ukweli wa herufi ya kwanza kwenye kifungu (kutumia pseudoElement):

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

Mtafiti mwenyewe

Inayotumika

window.getComputedStyle(element, pseudoElement)

Vifaa

Vifaa Utafiti
element Inayotumika. Kifungu inayotakiwa kuwakilika kwa hatua ya mifano.
pseudoElement Inayotumika. PseudoElement inayotakiwa kuwakilika.

Matokeo

Aina Utafiti
Kampuni Kampuni ya CSS ya hatua na ukweli wa CSSStyleDeclaration.

Muungano wa method ya getComputedStyle() na hatua ya style

Tukielea method ya getComputedStyle() na hatua ya style ya HTMLElement: yaani, hatua hii inasababisha kuwa hauwezi kufikia hatua ya mifano ya mtu wa kwanza, inaweza kutumia ukweli wa ujumbe wa kwanza, na hauwezi kumtaarifu ujumbe kuhusu hatua ya mifano ya mtu wa kwanza ya stili ya kifungu.

Muungano wa kawaida wa kawaida

Wote wa kawaida wanaongea getComputedStyle():

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