Mga Kaugalian ng Window getComputedStyle() Metodong

Definition and usage

getComputedStyle() The method gets the computed CSS properties and values of an HTML element.

getComputedStyle() The method returns a CSSStyleDeclaration object.

Computed style

Computed style refers to the styles used on an element after all style sources have been applied.

Source of style: external and internal style sheets, inherited styles, and browser default styles.

See also:

CSSStyleDeclaration 对象

Example

Example 1

Makuha ang computed background color ng elemento:

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

Try it yourself

Example 2

Makuha ang lahat ng computed style ng elemento:

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

Try it yourself

Example 3

Makuha ang computed font size ng unang titik ng elemento (gamit ang pseudo-element):

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

Try it yourself

Syntax

window.getComputedStyle(element, pseudoElement)

Parameter

Parameter Description
element Required. Ang elemento na dapat makuha ang computed style.
pseudoElement Optional. Ang pseudo-element na dapat makuha.

Return value

Type Description
Object CSSStyleDeclaration object na may lahat ng CSS property at halaga ng elemento.

Pagkakaiba ng paraan ng getComputedStyle() at attribute ng style

Ipagkumpara ang paraan ng getComputedStyle() sa attribute ng style ng HTMLElement: ang huli ay nagbibigay lamang ng access sa inline style ng elemento, ang anumang bawat inyong tinukoy na unit ay pwedeng gamitin, at, walang makakapagbigay ng anumang impormasyon tungkol sa mga style na naapply sa elemento sa style sheet.

浏览器支持

所有浏览器都支持 getComputedStyle()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持