window.getComputedStyle()

Metoden window.getComputedStyle() returerar ett objekt som rapporterar värdena hos alla CSS-egenskaper hos ett element efter att ha tillämpat aktiva stilmallar och löst ut godtycklig beräkning som dessa värden må innehålla.  Individuella CSS-egenskapers  värden nås genom API:er som tillhandahålls av objektet eller genom att helt enkelt indexera via namnen på CSS-egenskaper.

Syntax

var style = window.getComputedStyle(element[, pseudoElt]);
element
Elementet Element (en-US) för vilket den beräknade css-stilen önskas.
pseudoEltOptional
En textsträng som specificerar pseudo-elementet att matcha. Måste utelämnas (eller null) för vanliga element.
Märk: Innan Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), så krävdes pseudoElt parametern. Ingen annan av de stora webbläsarna medförde krav på att denna parameter var specificerad om null. Gecko har gjorts om till att matcha beteendet hos andra webbläsare.

Den returnerade stilen är ett realtids- CSSStyleDeclaration (en-US) objekt, som uppdaterar sigsjälvt automatiskt när elements stil ändras.

Exempel

I detta exempel stilger vi ett simpelt <div> (en-US) element, sen hämtar vi css-stilar med hjälp av getComputedStyle(), skriver ut dem in i text-innehåll hos ett <div>-element.

<p>Hello</p>
p {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  line-height: 2;
  font-size: 2rem;
  font-family: sans-serif;
  background: purple;
  color: white;
  text-align: center;
}
let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
para.textContent = 'My computed font-size is ' + compStyles.getPropertyValue('font-size') + ',\nand my computed line-height is ' + compStyles.getPropertyValue('line-height') + '.';

Resultat

Beskrivning

Det returnerade objektet är av samma CSSStyleDeclaration (en-US) typ som det objekt som returnerats från elementets style (en-US) egenskap; hur som helst, de två objekten har skilda syften. Objektet som returnerats från getComputedStyle är read-only (läs enkom) och kan användas för att inspektera elementets css-stil (inklusive de satta av ett <style>-element eller en extern stilmall). Objektet elt.style bör användas för att sätta stil på ett specifikt element.

Det första argumentet måste vara ett Element (att skicka en icke-Element-nod, såsom en #text-nod, kommer orsaka kast av error). Från Gecko 1.9.2 (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0) och framåt, har returnerade URL-värden nu citattecken runt URL:en, som det här: url("http://foo.com/bar.jpg").

defaultView

I många kodexempel online, används getComputedStyle från objektet document.defaultView. I nästan alla förekomster, är detta onödigt, då getComputedStyle existerar i objektet window också. Trolightvis så var "defaultView-möstret" en kombination av (1) folk som inte vill skriva en spec för window och (2) göra ett API som också kunde användas med Java. I vilket fall, det finns ett enda fall då defaultView metoden måste användas: när man använder Firefox 3.6 för att nå stilar i frames.

Användning med pseudo-element

getComputedStyle kan dra ut stilinfo från pseudo-element (till exempel, ::after, ::before, ::marker, ::line-marker—se spec här).

<style>
  h3::after {
    content: ' rocks!';
  }
</style>

<h3>generated content</h3>

<script>
  var h3 = document.querySelector('h3');
  var result = getComputedStyle(h3, ':after').content;

  console.log('the generated content is: ', result); // returns ' rocks!'
</script>

Märk

Det returnerade CSSStyleDeclaration (en-US) objektet kommer att innehålla aktiva värden för alla stödda CSS-egenskapers långhanda namn.  Ett exempel på långhanda namn är border-bottom-width där border-width och border är exempel på korthanda egenskapsnamn. Det är säkrast att söka på värden bara genom långhanda namn liksom font-size.  Att söka css med korthanda namn såsom font kommer inte fungera med majoriteten av webbläsare.

CSS-egenskapens värden kan nås med hjälp av getPropertyValue(propName) API:et eller genom att indexera direkt in i objektet så som cs[' z-index'] eller cs.zIndex.

Värdena som returneras av getComputedStyle är kända som resolved values (en-US). Dessa är oftast samma som med CSS 2.1 computed values (en-US), men för vissa äldre egenskaper som width, height eller padding, är de istället used values (en-US). Ursprungligen definierade CSS 2.0 de beräknade värdena att vara de "redo att användas" slutliga värdena hos egenskaper efter genomflöde och arv, men CSS 2.1 omdefinierade beräknade värden som för-layout, och använda vädet som efter-layout. För CSS 2.0 egenskaper, så returnerar funktionen getComputedStyle vad som beräknade värden förr innebar, det som nu kallas begagnade värden. Ett exempel på skillnad mellan för- och efter-layout-värden innefattar lösning av procentvärden som representerar bredd eller höjd hos ett element (dess s.k. layout), då dessa kommer ersättas av deras pixel-motsvarigheter bara i fallet av begagnade värden.

Det returnerade värdet är i vissa kända fall ej exakt satta med flit. Närmare bestämt, för att undvika den så kallade CSS History Läckage säkerhets-frågan, så kan webbläsare faktiskt "ljuga" om det begagnade värdet för en länk och alltid returnera värden som om en användare aldrig har besökt webbsidan. Se http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/ och http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ för detaljer för examplena på hur detta är implementerat. De flesta andra moderna webbläsare har tillämpat liknande ändringar på användandet av pseudo-selector-stilar och värdena som returneras av getComputedStyle.

Under en CSS-övergång, så returnerar getComputedStyle original-egenskaps värde i Firefox, men slutlig-egenskaps värde i WebKit.

I Firefox, så returnerar egenskaper med värdet auto det begangnade värdet, inte värdet auto. Så om du tillämpar top:auto; och bottom:0; på ett element som har height:30px och dess innehållande block har height:100px;, efter att ha begärt den beräknade stilen för top, så kommer Firefox returnera top:70px, som 100px-30px=70px.

Specifikationer

Specifikation Status Kommentar
CSS Object Model (CSSOM)
The definition of 'getComputedStyle()' in that specification.
Working Draft  
Document Object Model (DOM) Level 2 Style Specification
The definition of 'getComputedStyle()' in that specification.
Obsolete Initial definition

Kompatibilitet i webbläsare

BCD tables only load in the browser

Se även