window.getComputedStyle
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 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
var style = window.getComputedStyle(element[, pseudoElt]);
- element
-
L'
Elementpour 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
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, 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
Chargement…