Denna översättning är ofullständig. Hjälp till att översätta denna artikel från engelska.

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 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 objekt, som uppdaterar sigsjälvt automatiskt när elements stil ändras.

Exempel

I detta exempel stilger vi ett simpelt <div> 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 typ som det objekt som returnerats från elementets style 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 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. Dessa är oftast samma som med CSS 2.1 computed values, men för vissa äldre egenskaper som width, height eller padding, är de istället used values. 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support Yes
Notes
Full support Yes
Notes
Notes Before version 62 this function returned null when called on a Window with no presentation (e.g. an iframe with display: none; set). Since 62 it returns a CSSStyleDeclaration object with length 0, containing empty strings (bug 1467722; also see bug 1471231 for further work).
IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support Yes
Notes
Full support Yes
Notes
Notes Before version 62 this function returned null when called on a Window with no presentation (e.g. an iframe with display: none; set). Since 62 it returns a CSSStyleDeclaration object with length 0, containing empty strings (bug 1467722; also see bug 1471231 for further work).
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
Pseudo-element supportChrome Full support YesEdge ? Firefox Full support YesIE Full support 9Opera Full support 15Safari Full support YesWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

Se även

Dokumenttaggar och bidragare

Bidragare till denna sida: valterekholm
Senast uppdaterad av: valterekholm,