From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- .../web/api/window/getcomputedstyle/index.html | 131 +++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 files/sv-se/web/api/window/getcomputedstyle/index.html (limited to 'files/sv-se/web/api/window/getcomputedstyle/index.html') 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 +--- +

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 {{domxref("Element")}} för vilket den beräknade css-stilen önskas.
+
pseudoElt{{optional_inline}}
+
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 {{geckoRelease("2.0")}}, 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- {{domxref("CSSStyleDeclaration")}} objekt, som uppdaterar sigsjälvt automatiskt när elements stil ändras.

+ +

Exempel

+ +

I detta exempel stilger vi ett simpelt {{htmlelement("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

+ +

{{EmbedLiveSample('Examples', '100%', '240px')}}

+ +

Beskrivning

+ +

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 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 {{geckoRelease("1.9.2")}} 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 {{domxref("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 {{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 width, height eller padding, ä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 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

+ + + + + + + + + + + + + + + + + + + + + +
SpecifikationStatusKommentar
{{SpecName("CSSOM", "#dom-window-getcomputedstyle", "getComputedStyle()")}}{{Spec2("CSSOM")}} 
{{SpecName("DOM2 Style", "#CSS-CSSview-getComputedStyle", "getComputedStyle()")}}{{Spec2("DOM2 Style")}}Initial definition
+ +

Kompatibilitet i webbläsare

+ + + +

{{Compat("api.Window.getComputedStyle")}}

+ +

Se även

+ + + +
{{APIRef}}
-- cgit v1.2.3-54-g00ecf