Metodi getComputedStyle()

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 oletusstyylit.

Katso myös:

CSSStyleDeclaration-objekti

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. Haluttavaa pseudoelementtiä.

Palautusarvo

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

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

Vertaa getComputedStyle() -menetelmää HTMLElementin style-ominaisuuden kanssa: jälkimmäinen sallii vain elementin sisäisen tyylilistan katselun, ja voit käyttää minkä tahansa yksikön, mutta se ei voi kertoa sinulle mitään elementin tyylilistan sovellettavista säännöistä.

Selaimen tuki

Kaikki selaimet tukevat getComputedStyle()：

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