getComputedStyle() -menetelmä

Määritelmä ja käyttö

getComputedStyle() Menetelmä hakee HTML-elementin lasketut CSS-ominaisuudet ja -arvot.

getComputedStyle() Menetelmä palauttaa CSSStyleDeclaration-objektin.

Laskettu tyyli

Laskettu tyyli tarkoittaa kaikkien tyylilähteiden soveltamisen jälkeen elementille sovellettavaa tyylejä.

Tyylilähteet: ulkoiset ja sisäiset tyylilistat, perityt tyylit ja selaimen oletustyylit.

Katso myös:

CSSStyleDeclaration 对象

Esimerkki

Esimerkki 1

Hae elementin laskettu taustaväri:

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

Kokeile itse

Esimerkki 2

Hae elementistä kaikki lasketut tyylit:

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

Kokeile itse

Esimerkki 3

Hae elementin ensimmäisen kirjaimen laskettu fonttikoko (käyttämällä pseudoelementtiä):

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

Kokeile itse

Syntaksi

window.getComputedStyle(element, pseudoElement)

Parametrit

Parametrit Kuvaus
element Vakio. Elementti, jolle haluat hakea lasketut tyylit.
pseudoElement Valinnainen. Hakea tarkoituksessa oleva pseudoelementti.

Palautusarvo

Tyyppi Kuvaus
Objekti CSSStyleDeclaration-objekti, joka sisältää elementin kaikki CSS-ominaisuudet ja -arvot.

getComputedStyle() -menetelmän ja style-ominaisuuden ero

Vertaa getComputedStyle() -menetelmää HTMLElementin style-ominaisuuden kanssa: jälkimmäinen sallii vain elementin sisäisen tyylin pääsyn, ja voit käyttää minkä tahansa yksikön, mutta se ei voi kertoa sinulle minkään tietyn elementin tyylilistan tyyleistä.

浏览器支持

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

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