initial commit

1 files changed, 131 insertions, 0 deletions

diff --git a/files/sv-se/web/api/window/getcomputedstyle/index.html b/files/sv-se/web/api/window/getcomputedstyle/index.html
new file mode 100644
index 0000000000..192d16bb23
--- /dev/null
+++ b/files/sv-se/web/api/window/getcomputedstyle/index.html
@@ -0,0 +1,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>&lt;div&gt;</code>-element.</p>
+
+<pre class="brush: html">&lt;p&gt;Hello&lt;/p&gt;</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>&lt;style&gt;</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">&lt;style&gt;
+  h3::after {
+    content: ' rocks!';
+  }
+&lt;/style&gt;
+
+&lt;h3&gt;generated content&lt;/h3&gt;
+
+&lt;script&gt;
+  var h3 = document.querySelector('h3');
+  var result = getComputedStyle(h3, ':after').content;
+
+  console.log('the generated content is: ', result); // returns ' rocks!'
+&lt;/script&gt;
+</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>