Fenêtre getComputedStyle()
Exemple
Obtenez la couleur d'arrière-plan calculée d'un élément :
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
Plus d'exemples ci-dessous.
Définition et utilisation
La getComputedStyle()
méthode obtient les propriétés et les valeurs CSS calculées d'un élément HTML.
La getComputedStyle()
méthode retourne un
CSSStyleDeclaration object
.
Style calculé
Le style calculé est le style utilisé sur l'élément après que toutes les sources de style ont été appliquées.
Sources de style : feuilles de style externes et internes, styles hérités et styles par défaut du navigateur.
Voir également:
Syntaxe
window.getComputedStyle(element, pseudoElement)
Paramètres
Parameter | Description |
element | Required. The element to get the computed style for. |
pseudoElement | Optional. A pseudo-element to get. |
Valeur de retour
Taper | La description |
Un objet | Un objet CSSStyleDeclaration avec toutes les propriétés et valeurs CSS de l'élément. |
Plus d'exemples
Obtenez tous les styles calculés à partir d'un élément :
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let text = "";
for (x in cssObj) {
cssObjProp = cssObj.item(x)
text += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}
Obtenir la taille de police calculée de la première lettre d'un élément (en utilisant un pseudo-élément) :
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");
Prise en charge du navigateur
getComputedStyle()
est pris en charge dans tous les navigateurs :
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |