window.getComputedStyle

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

js
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, 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

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

// Ce qui équivaut à :
// var style = document.defaultView.getComputedStyle(elem1, null);
html
<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>
js
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, les URLs renvoyées ont désormais des guillemets autour de celles-ci: url("http://foo.com/bar.jpg").

Spécifications

Specification
CSS Object Model (CSSOM)
# dom-window-getcomputedstyle

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi