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
|
---
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"><style>
#elem-container{
position: absolute;
left: 100px;
top: 200px;
height: 100px;
}
</style>
<div id="elem-container">dummy</div>
<div id="output"></div>
<script>
function getTheStyle(){
var elem = document.getElementById("elem-container");
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
document.getElementById("output").innerHTML = theCSSprop;
}
getTheStyle();
</script>
</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"><</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><style></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="Specification">Spécification</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</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>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
<p>{{Compat("api.Window.getComputedStyle")}}</p>
<h2 id="See_also">Voir aussi</h2>
<ul>
<li>{{domxref("window.getDefaultComputedStyle")}}</li>
<li>{{cssxref("resolved_value", "Valeur résolue")}}</li>
</ul>
|
