Window : méthode getComputedStyle()

Syntaxe

getComputedStyle(element)
getComputedStyle(element, pseudoElt)

Paramètres

element

L'objet Element pour lequel vous voulez obtenir le style calculé.

pseudoElt Facultatif

Une chaîne de caractères définissant le pseudo-élément à cibler. Omit (ou null) pour les éléments réels.

Valeur de retour

Un objet CSSStyleProperties dynamique, qui se met à jour automatiquement lorsque les styles de l'élément changent.

Exceptions

TypeError

Si l'objet passé n'est pas un Element ou si le pseudoElt n'est pas un sélecteur de pseudo-élément valide ou est ::part() ou ::slotted().

Note : Un sélecteur de pseudo-élément valide fait référence à la validité syntaxique, par exemple, ::unsupported est considéré comme valide, même si le pseudo-élément lui-même n'est pas pris en charge.

Description

La méthode retourne un objet CSSStyleProperties dynamique et en lecture seule contenant les valeurs résolues de toutes les propriétés CSS d'un élément, après application des feuilles de style actives et résolution de toute computation que ces valeurs peuvent contenir.

L'objet retourné peut être utilisé pour inspecter les styles de l'élément — y compris ceux définis en ligne, à l'aide d'un élément <style>, ou via une feuille de style externe. Comme l'objet est en lecture seule, vous ne pouvez pas l'utiliser pour définir les styles d'un élément. Cependant, comme il est « dynamique », si vous mettez à jour les styles de l'élément à l'aide d'une autre API (comme HTMLElement.style), l'objet retourné sera mis à jour avec la valeur résolue correspondante.

La distinction selon laquelle l'objet contient des valeurs résolues est importante. Pour la plupart des propriétés, en particulier celles qui dépendent de la mise en page comme display, font-size ou line-height, la valeur résolue est la valeur calculée. Pour les propriétés qui dépendent de la mise en page, la valeur utilisée peut différer légèrement de la valeur calculée, et c'est cette valeur qui est retournée comme valeur résolue. Pour une propriété animée, il s'agira de la valeur calculée au point courant de l'animation.

L'objet retourné possède des propriétés nommées avec des tirets et les propriétés correspondantes en camel-case pour toutes les propriétés CSS prises en charge par le navigateur, y compris les propriétés raccourcies et les propriétés longues.

Les propriétés CSS raccourcies de l'élément sont développées en leurs propriétés longues correspondantes. Par exemple, un élément avec le style "border-top: 1px solid black" serait représenté dans l'objet retourné par les propriétés nommées border-top et borderTop, ainsi que les propriétés longues correspondantes border-top-color et borderTopColor, border-top-style et borderTopStyle, et border-top-width et borderTopWidth.

Notez que l'objet retourné est du même type que celui retourné par la propriété style de l'élément. Cependant, l'objet element.style peut aussi être utilisé pour définir des styles sur cet élément, et ne retourne que les styles en ligne ou ceux définis via JavaScript.

Valeurs de couleur

Pour des raisons de compatibilité, les valeurs de couleur sérialisées définies avec l'espace colorimétrique sRGB traditionnel sont exprimées sous forme de couleurs rgb() si la valeur du canal alpha est exactement 1, et sous forme de rgba() sinon. La syntaxe héritée avec des virgules est utilisée, avec des virgules comme séparateurs (par exemple rgb(255, 0, 0)).

Pour les autres espaces colorimétriques, les valeurs sont sérialisées en utilisant les expressions fonctionnelles correspondantes : lab(), lch(), oklab(), oklch(), color().

Exemples

Récupérer les styles résolus

Dans cet exemple, nous appliquons un style à un élément HTML <p>, puis nous récupérons ces styles à l'aide de getComputedStyle(), et nous les affichons dans le contenu textuel du <p>.

HTML

<p>Bonjour</p>

CSS

p {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  font: 2rem/2 sans-serif;
  text-align: center;
  background: purple;
  color: white;
}

JavaScript

const para = document.querySelector("p");
const compStyles = window.getComputedStyle(para);
para.textContent =
  `Ma taille de police calculée est ${compStyles.getPropertyValue("font-size")},\n` +
  `et ma hauteur de ligne calculée est ${compStyles.getPropertyValue(
    "line-height",
  )}.`;

Résultat

Utiliser avec les pseudo-éléments

getComputedStyle() peut récupérer les informations de style depuis des pseudo-éléments, tels que ::after, ::before, ::marker ou ::line-marker.

<h3>Contenu généré</h3>

h3::after {
  content: " licorne !";
}

const h3 = document.querySelector("h3");
const result = getComputedStyle(h3, "::after").content;

console.log("le contenu généré est : ", result); // returns ' licorne !'

Spécifications

Compatibilité des navigateurs

Voir aussi

• La méthode window.getDefaultComputedStyle()
• La méthode getPropertyValue()
• La méthode Element.computedStyleMap()
• Valeur résolue