window.getComputedStyle

  • Raccourci de la révision : DOM/window.getComputedStyle
  • Titre de la révision : window.getComputedStyle
  • ID de la révision : 238857
  • Créé :
  • Créateur : Zlitus
  • Version actuelle ? Non
  • Commentaire Création de la page en traduisant la version anglophone; page created, 171 words added

Contenu de la révision

{{ DomRef() }}

Sommaire

getComputedStyle() donne la  valeur calculée finale de toutes les propriétés CSS sur un élément.

Syntax

var style = window.getComputedStyle(element[, pseudoElt]);
element
Le {{ domxref("Element") }} pour lequel vous voulez obtenir la valeur calculée.
pseudoElt {{ optional_inline() }}
Chaîne de caractère spécifiant le pseudo-élément à cibler. Doit être null (ou non spécifiée) pour les éléments communs.
Note: Avant Gecko 2.0 {{ geckoRelease("2.0") }}, le paramètre pseudoElt était obligatoire. Aucun autre navigateur majeur ne requère que ce paramètre soit renseigné si il est null. Gecko a été modifié pour se comporter comme les autres navigateurs.

La valeur de retour style est un objet CSSStyleDeclaration.

Exemple

var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1, null);

// Ce qui équivaut à : 
// var style = document.defaultView.getComputedStyle(elem1, null);
<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>

Source de la révision

<p>{{ DomRef() }}</p>
<h3>Sommaire</h3>
<p><code>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>
<h3>Syntax</h3>
<pre class="eval">var <em>style</em> = window.getComputedStyle(<em>element</em>[, <em>pseudoElt</em>]);</pre>
<dl> <dt>element</dt> <dd>Le {{ domxref("Element") }} pour lequel vous voulez obtenir la 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 requère 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>
<h3>Exemple</h3>
<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>
Revenir à cette révision