1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
---
title: window.getComputedStyle()
slug: Web/API/Window/getComputedStyle
translation_of: Web/API/Window/getComputedStyle
---
<p class="summary"><span class="seoSummary"><code><font face="Verdana, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Metoden </span></font>window.getComputedStyle()</code> 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.</span> 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.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">var <em>style</em> = window.getComputedStyle(<em>element</em>[, <em>pseudoElt</em>]);
</pre>
<dl>
<dt>element</dt>
<dd>Elementet {{domxref("Element")}} för vilket den beräknade css-stilen önskas.</dd>
<dt>pseudoElt{{optional_inline}}</dt>
<dd>En textsträng som specificerar pseudo-elementet att matcha. Måste utelämnas (eller null) för vanliga element.</dd>
</dl>
<div class="note"><strong>Märk:</strong> Innan Gecko 2.0 {{geckoRelease("2.0")}}, så krävdes <code>pseudoElt</code> 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.</div>
<p>Den returnerade <code>stilen</code> är ett <em>realtids-</em> {{domxref("CSSStyleDeclaration")}} objekt, som uppdaterar sigsjälvt automatiskt när elements stil ändras.</p>
<h2 id="Exempel">Exempel</h2>
<p>I detta exempel stilger vi ett simpelt {{htmlelement("div")}} element, sen hämtar vi css-stilar med hjälp av <code>getComputedStyle()</code>, skriver ut dem in i text-innehåll hos ett <code><div></code>-element.</p>
<pre class="brush: html"><p>Hello</p></pre>
<pre class="brush: css">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;
}</pre>
<pre class="brush: js">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') + '.';</pre>
<h3 id="Resultat">Resultat</h3>
<p>{{EmbedLiveSample('Examples', '100%', '240px')}}</p>
<h2 id="Beskrivning">Beskrivning</h2>
<p>Det returnerade objektet är av samma {{domxref("CSSStyleDeclaration")}} typ som det objekt som returnerats från elementets {{domxref("HTMLElement.style", "style")}} egenskap; hur som helst, de två objekten har skilda syften. Objektet som returnerats från <code>getComputedStyle</code> är read-only (läs enkom) och kan användas för att inspektera elementets css-stil (inklusive de satta av ett <code><style></code>-element eller en extern stilmall). Objektet <code>elt.style</code> bör användas för att sätta stil på ett specifikt element.</p>
<p>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 {{geckoRelease("1.9.2")}} och framåt, har returnerade URL-värden nu citattecken runt URL:en, som det här: <code>url("http://foo.com/bar.jpg")</code>.</p>
<h2 id="defaultView"><code>defaultView</code></h2>
<p>I många kodexempel online, används <code>getComputedStyle</code> från objektet <code>document.defaultView</code>. I nästan alla förekomster, är detta onödigt, då <code>getComputedStyle</code> existerar i objektet <code>window</code> 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 <a class="link-https" href="https://github.com/jquery/jquery/pull/524#issuecomment-2241183" title="https://github.com/jquery/jquery/pull/524#issuecomment-2241183">ett enda fall</a> då <code>defaultView</code> metoden måste användas: när man använder Firefox 3.6 för att nå stilar i frames.</p>
<h2 id="Användning_med_pseudo-element">Användning med pseudo-element</h2>
<p>getComputedStyle kan dra ut stilinfo från pseudo-element (till exempel, <code>::after</code>, <code>::before</code>, <code>::marker</code>, <code>::line-marker</code>—se <a class="external" href="https://www.w3.org/TR/css-pseudo-4/">spec</a> här).</p>
<pre class="brush: html"><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>
</pre>
<h2 id="Märk">Märk</h2>
<p>Det returnerade {{domxref("CSSStyleDeclaration")}} objektet kommer att innehålla aktiva värden för alla stödda CSS-egenskapers <u>långhanda</u> namn. Ett exempel på långhanda namn är <code>border-bottom-width</code> där <code>border-width</code> och <code>border</code> är exempel på <a href="/en-US/docs/Web/CSS/Shorthand_properties">korthanda egenskapsnamn</a>. Det är säkrast att söka på värden bara genom långhanda namn liksom <code>font-size</code>. Att söka css med korthanda namn såsom <code>font</code> kommer inte fungera med majoriteten av webbläsare.</p>
<p>CSS-egenskapens värden kan nås med hjälp av <code>getPropertyValue(propName)</code> API:et eller genom att indexera direkt in i objektet så som <code>cs[' z-index']</code> eller <code>cs.zIndex</code>.</p>
<p>Värdena som returneras av <code>getComputedStyle</code> är kända som {{cssxref("resolved_value", "resolved values")}}. Dessa är oftast samma som med CSS 2.1 {{cssxref("computed_value","computed values")}}, men för vissa äldre egenskaper som <code>width</code>, <code>height</code> eller <code>padding</code>, är de istället {{cssxref("used_value","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 <code>getComputedStyle</code> vad som beräknade värden förr innebar, det som nu kallas <strong>begagnade värden</strong>. 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.</p>
<p>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 <a class="external" href="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/</a> och <a class="external" href="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/</a> 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 <code>getComputedStyle</code>.</p>
<p>Under en CSS-övergång, så returnerar <code>getComputedStyle</code> original-egenskaps värde i Firefox, men slutlig-egenskaps värde i WebKit.</p>
<p>I Firefox, så returnerar egenskaper med värdet <code>auto</code> det begangnade värdet, inte värdet <code>auto</code>. Så om du tillämpar <code>top:auto;</code> och <code>bottom:0</code>; på ett element som har <code>height:30px</code> och dess innehållande block har <code>height:100px;</code>, efter att ha begärt den beräknade stilen för <code>top</code>, så kommer Firefox returnera <code>top:70px</code>, som <code>100px-30px=70px</code>.</p>
<h2 id="Specifikationer">Specifikationer</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSSOM", "#dom-window-getcomputedstyle", "getComputedStyle()")}}</td>
<td>{{Spec2("CSSOM")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("DOM2 Style", "#CSS-CSSview-getComputedStyle", "getComputedStyle()")}}</td>
<td>{{Spec2("DOM2 Style")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Kompatibilitet_i_webbläsare">Kompatibilitet i webbläsare</h2>
<div class="hidden">Tabellen med kompatibilitet på denna sida är genererad från strukturerad data. Om du vill bidra till datat, vänligen besök adressen <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> och skicka oss ett pull request.</div>
<p>{{Compat("api.Window.getComputedStyle")}}</p>
<h2 id="See_also" name="See_also">Se även</h2>
<ul>
<li>{{domxref("window.getDefaultComputedStyle")}}</li>
<li>{{cssxref("resolved_value", "Resolved Value")}}</li>
</ul>
<div>{{APIRef}}</div>
|
