MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

window.getComputedStyle

Résumé

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

Syntaxe

var style = window.getComputedStyle(element[, pseudoElt]);
element
L’Element pour lequel vous voulez obtenir une valeur calculée.
pseudoElt Facultatif
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 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), le paramètre pseudoElt é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.

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>
function dumpComputedStyles(elem,prop) {

  var cs = window.getComputedStyle(elem,null);
  if (prop) {
    console.log(prop+" : "+cs.getPropertyValue(prop));
    return;
  }
  var len = cs.length;
  for (var i=0;i<len;i++) {
 
    var style = cs[i];
    console.log(style+" : "+cs.getPropertyValue(style));
  }

}

Description

L'objet retourné est du même type que celui de la propriété style de l'élément ciblé. Toutefois les deux objets ont des buts distincts. L'objet retourné par la méthode getComputedStyle 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 <style> ou une feuille de style externe. L'objet elt.style doit quant à lui être utilisé pour mettre à jour une propriété de style sur un élément donné.

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 (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0), les URLs renvoyées ont désormais des guillemets autour de celles-ci: url("http://foo.com/bar.jpg").

Compatibilité des navigateurs

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Oui) (Oui) (Oui) 9 (Oui) (Oui)
pseudo-element support (Oui) ? (Oui) 9 15 (Oui)
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Oui) (Oui) (Oui) WP7 Mango (Oui) (Oui)
pseudo-element support ? ? ? Pas de support ? ?

Spécification

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : scaillerie, Jean-MariePETIT, fscholz, teoli, khalid32, tregagnon, Zlitus
 Dernière mise à jour par : scaillerie,