getComputedStyle()
Renvoie les styles calculés d’un élément, c’est-à-dire les valeurs CSS que le navigateur a réellement appliquées après avoir pris en compte toutes les règles.
- Renvoie
- Un objet
CSSStyleDeclarationvivant, en lecture seule, avec les valeurs calculées de toutes les propriétés CSS.
Exemple
#const badge = document.querySelector('#badge')
const styles = getComputedStyle(badge)
console.log(badge.style.color === '')
console.log(styles.color)
console.log(styles.fontSize)
console.log(styles.fontWeight)
console.log(styles.borderTopColor)
console.log(styles.display)element.style est vide, car la couleur vient de la classe. Les styles calculés montrent la couleur au format rgb(), la taille 1.25rem en pixels, bold sous la forme 700, et currentColor converti en couleur concrète. inline est le mode d’affichage par défaut de l’élément <span>.
Définition et utilisation
#La fonction getComputedStyle() (son nom complet est window.getComputedStyle()) renvoie un objet avec les valeurs finales de toutes les propriétés CSS de l’élément. Elle tient compte des feuilles de style, des styles inline, de l’héritage et des valeurs par défaut du navigateur. C’est le moyen le plus simple de vérifier en JavaScript, par ex., la couleur donnée par une classe, car element.style ne voit que les styles écrits dans l’attribut style.
Les valeurs sont renvoyées sous forme calculée, généralement uniformisée : les couleurs en rgb(…), les longueurs en pixels (1.25rem devient par ex. "20px"), et les mots-clés comme bold en nombres ("700"). Ce sont toujours des chaînes, donc avant tout calcul, convertissez-les en nombres, par ex. avec parseFloat().
L’objet renvoyé est « vivant » : après un changement de classe ou de style, la lecture suivante montre la nouvelle valeur. Il est en lecture seule, donc modifiez les styles via element.style ou classList. Le second argument permet de lire les styles d’un pseudo-élément, par ex. getComputedStyle(el, "::before").content, et vous lisez les valeurs des variables CSS avec la méthode getPropertyValue("--nom").
Syntaxe
#getComputedStyle(element)
getComputedStyle(element, pseudoElement)
getComputedStyle(element).propertyName
getComputedStyle(element).getPropertyValue(name)Paramètres
#element
Element
L’élément dont vous voulez lire les styles calculés.pseudoElement
chaîne, optionnel
Un pseudo-élément, par ex."::before"ou"::after".
Plus d’exemples
#const progress = document.querySelector('#progress')
const { width, paddingLeft } = getComputedStyle(progress)
console.log(width, paddingLeft)
console.log(parseFloat(width) - 2 * parseFloat(paddingLeft))
console.log(width + 10)Les valeurs calculées sont des chaînes avec une unité. parseFloat() en extrait les nombres, et une simple addition concatène les chaînes, comme on le voit sur la dernière ligne.
const lesson = document.querySelector('#lesson')
const before = getComputedStyle(lesson, '::before')
console.log(before.content)
console.log(before.color)
console.log(getComputedStyle(document.documentElement).getPropertyValue('--accent'))const panel = document.querySelector('#panel')
const styles = getComputedStyle(panel)
console.log(styles.display)
panel.classList.add('hidden')
console.log(styles.display)Pas besoin d’appeler getComputedStyle() à nouveau. Le même objet montre immédiatement la nouvelle valeur après le changement de classe.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Les valeurs calculées sont des chaînes avec des unités, par ex.
"16px". Avant tout calcul, utilisezparseFloat(). - Vous obtiendrez généralement les couleurs au format
rgb(…), même si elles sont écrites en CSS sous forme de#hexou de nom. Comparez-les dans le même format. - Lire les styles calculés peut forcer le navigateur à recalculer les styles et la mise en page. N’alternez pas, dans une boucle, des lectures et des changements de style.
Entrées associées
#- HTMLElement.styleUn objet pour les styles écrits directement sur l’élément (inline), pour lire et modifier des propriétés CSS individuelles.
- Element.classListUn objet pour ajouter, retirer, basculer et vérifier les classes CSS d’un élément.
- Element.getBoundingClientRect()Renvoie la taille d’un élément et sa position par rapport à la zone visible de la fenêtre, sous la forme d’un objet DOMRect.
- Number.parseFloat()Convertit le début d’une chaîne de caractères en nombre à virgule flottante.
- matchMedia()Vérifie en JavaScript si la page satisfait une media query CSS, par exemple (max-width: 600px), et permet de réagir à ses changements.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.