files/fr/web/api/window/getcomputedstyle/index.html


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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164

---
title: window.getComputedStyle
slug: Web/API/Window/getComputedStyle
translation_of: Web/API/Window/getComputedStyle
---
<p>{{ ApiRef() }}</p>

<h2 id="Résumé">Résumé</h2>

<p><code>La méthode window.getComputedStyle() </code>donne la  <a href="/en/CSS/used_value" title="https://developer.mozilla.org/en/CSS/used_value">valeur calculée finale</a> de toutes les propriétés CSS sur un élément.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="eval">var <em>style</em> = window.getComputedStyle(<em>element</em>[, <em>pseudoElt</em>]);</pre>

<dl>
 <dt>element</dt>
 <dd>L’{{ domxref("Element") }} pour lequel vous voulez obtenir une valeur calculée.</dd>
 <dt>pseudoElt {{ optional_inline() }}</dt>
 <dd>Chaîne de caractère spécifiant le pseudo-élément à cibler. Doit être <code>null</code> (ou non spécifiée) pour les éléments communs.</dd>
</dl>

<div class="note"><strong>Note:</strong> Avant Gecko 2.0 {{ geckoRelease("2.0") }}, le paramètre <code>pseudoElt</code> était obligatoire. Aucun autre navigateur majeur ne requiert que ce paramètre soit renseigné si il est null. Gecko a été modifié pour se comporter comme les autres navigateurs.</div>

<p>La valeur de retour <code>style</code> est un objet <a href="/en/DOM/CSSStyleDeclaration" title="en/DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a>.</p>

<h2 id="Exemple">Exemple</h2>

<pre class="brush: js">var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1, null);

// Ce qui équivaut à :
// var style = document.defaultView.getComputedStyle(elem1, null);
</pre>

<pre class="brush: js">&lt;style&gt;
 #elem-container{
   position: absolute;
   left:     100px;
   top:      200px;
   height:   100px;
 }
&lt;/style&gt;

&lt;div id="elem-container"&gt;dummy&lt;/div&gt;
&lt;div id="output"&gt;&lt;/div&gt;

&lt;script&gt;
  function getTheStyle(){
    var elem = document.getElementById("elem-container");
    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
    document.getElementById("output").innerHTML = theCSSprop;
   }
  getTheStyle();
&lt;/script&gt;
</pre>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="function token">function dumpComputedStyles</span><span class="punctuation token">(</span>elem<span class="punctuation token">,</span>prop<span class="punctuation token">)</span> <span class="punctuation token">{</span>

  <span class="keyword token">var</span> cs <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">getComputedStyle</span><span class="punctuation token">(</span>elem<span class="punctuation token">,</span><span class="keyword token">null</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="keyword token">if</span> <span class="punctuation token">(</span>prop<span class="punctuation token">)</span> <span class="punctuation token">{</span>
    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>prop<span class="operator token">+</span><span class="string token">" : "</span><span class="operator token">+</span>cs<span class="punctuation token">.</span><span class="function token">getPropertyValue</span><span class="punctuation token">(</span>prop<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
    <span class="keyword token">return</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span>
  <span class="keyword token">var</span> len <span class="operator token">=</span> cs<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i<span class="operator token">=</span><span class="number token">0</span><span class="punctuation token">;</span>i<span class="operator token">&lt;</span>len<span class="punctuation token">;</span>i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>

    <span class="keyword token">var</span> style <span class="operator token">=</span> cs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">;</span>
    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>style<span class="operator token">+</span><span class="string token">" : "</span><span class="operator token">+</span>cs<span class="punctuation token">.</span><span class="function token">getPropertyValue</span><span class="punctuation token">(</span>style<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span>

<span class="punctuation token">}</span></code></pre>

<h2 id="Description">Description</h2>

<p>L'objet retourné est du même type que celui de la propriété {{domxref("HTMLElement.style", "style")}} de l'élément ciblé. Toutefois les deux objets ont des buts distincts. L'objet retourné par la méthode <code>getComputedStyle</code> est en lecture seule et peut être utilisée pour inspecter le style de l'élément y compris ceux ajoutés via un élément <code>&lt;style&gt;</code> ou une feuille de style externe. L'objet <code>elt.style</code> doit quant à lui être utilisé pour mettre à jour une propriété de style sur un élément donné.</p>

<p>Le premier argument doit être un Element, sinon, si par exemple un #text Node est utilisé, une exception sera lancée. Depuis la version 1.9.2 de Gecko {{geckoRelease("1.9.2")}}, les URLs renvoyées ont désormais des guillemets autour de celles-ci: <code>url("http://foo.com/bar.jpg")</code>.</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>9</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>pseudo-element support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>9</td>
   <td>15</td>
   <td>{{CompatVersionUnknown}} </td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>WP7 Mango</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>pseudo-element support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Spécification">Spécification</h2>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle">DOM Level 2 Style: getComputedStyle</a></li>
 <li><a href="http://dev.w3.org/csswg/cssom/#resolved-values" title="http://dev.w3.org/csswg/cssom/#resolved-values">CSS Object Model specification</a></li>
</ul>

<h2 id="See_also" name="See_also">Voir aussi</h2>

<ul>
 <li>{{domxref("window.getDefaultComputedStyle")}}</li>
 <li>{{cssxref("resolved_value", "Resolved Value")}}</li>
</ul>