Metodong getComputedStyle()

Definition and usage

getComputedStyle() The method retrieves 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:

Objeto CSSStyleDeclaration

Instance

Example 1

Kumuha ng 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

Kumuha ng lahat ng computed style mula sa 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

Kumuha ng 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 kumuha ng computed style.
pseudoElement Optional. Ang pseudo-element na dapat kumuha.

Return value

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

Pagkakaiba ng getComputedStyle() method at style attribute

Ipagkumpara ang getComputedStyle() method sa style attribute ng HTMLElement: ang huli lamang ay nagbibigay ng access sa inline style ng elemento, na mayroon ang anumang bawat unit na iyong pinagbigay, at, hindi makakapagbigay ng anumang impormasyon tungkol sa mga style sa stylesheet na naugnay sa elemento.

Suporta ng browser

Lahat ng mga browser ay sumusuporta getComputedStyle():

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