Element : méthode computedStyleMap()

Syntaxe

computedStyleMap()

Paramètres

Aucun.

Valeur de retour

Un objet StylePropertyMapReadOnly.

Contrairement à Window.getComputedStyle, la valeur de retour contient des valeurs calculées, et non des valeurs résolues. Pour la plupart des propriétés, elles sont identiques, sauf pour quelques propriétés liées à la mise en page, où la valeur résolue est la valeur utilisée au lieu de la valeur calculée. Voir l'exemple de comparaison avec getComputedStyle() pour plus de détails.

Exemples

Obtenir les styles par défaut

Nous commençons par un HTML simple : un paragraphe avec un lien, et une liste de définitions à laquelle nous ajoutons toutes les paires Propriété / Valeur CSS.

<p>
  <a href="https://example.com">Lien</a>
</p>
<dl id="regurgitation"></dl>

Nous ajoutons un peu de CSS

a {
  --couleur: red;
  color: var(--couleur);
}

Nous ajoutons du JavaScript pour récupérer notre lien et renvoyer une liste de définitions de toutes les valeurs des propriétés CSS en utilisant computedStyleMap().

// obtenir l'élément
const monElement = document.querySelector("a");

// obtenir le <dl> que nous allons remplir
const listeStyle = document.querySelector("#regurgitation");

// Récupérer tous les styles calculés avec computedStyleMap()
const tousLesStylesCalcules = monElement.computedStyleMap();

// Parcourir la carte contenant toutes les propriétés et valeurs, en
// ajoutant un élément <dt> et un élément <dd> pour chacune d'entre elles
for (const [prop, val] of tousLesStylesCalcules) {
  // propriété
  const proprieteCss = document.createElement("dt");
  proprieteCss.appendChild(document.createTextNode(prop));
  listeStyle.appendChild(proprieteCss);

  // valeurs
  const valeurCss = document.createElement("dd");
  valeurCss.appendChild(document.createTextNode(val));
  listeStyle.appendChild(valeurCss);
}

Dans les navigateurs qui prennent en charge computedStyleMap(), vous pouvez voir une liste de toutes les propriétés et valeurs CSS. Dans les autres navigateurs, vous ne voyez qu'un lien.

Avez-vous réalisé combien de propriétés CSS par défaut un lien avait ? Mettez à jour le document.querySelector("a") en document.querySelector("p"), et vous remarquez une différence dans les valeurs calculées par défaut de margin-top et margin-bottom.

Comparer avec getComputedStyle()

Window.getComputedStyle() retourne les valeurs résolues, tandis que computedStyleMap() retourne les valeurs calculées. Celles-ci sont généralement les mêmes, mais pour certaines propriétés, la valeur résolue est la valeur utilisée au lieu de la valeur calculée. Par exemple, les valeurs en pourcentage pour les largeurs sont résolues en pixels après la mise en page, donc les valeurs utilisées sont en pixels, tandis que les valeurs calculées sont toujours en pourcentage.

Notez que la façon dont nous présentons cela fait paraître les deux API plus similaires qu'elles ne le sont réellement. computedStyleMap() contient des objets CSSOM typés, tandis que getComputedStyle() contient des chaînes de caractères. La première présente les mêmes informations de manière plus structurée et exploitable.

Dans cet exemple, la propriété width est définie en pourcentage, donc la valeur calculée est exprimée en pourcentage, mais la valeur finale est exprimée en pixels. La propriété height est toujours exprimée en pixels. La propriété background-color correspond à une couleur nommée, mais elle est convertie en valeur RVB lors du calcul.

<div class="conteneur">
  <div class="element"></div>
</div>
<pre id="resultat"></pre>

.conteneur {
  width: 200px;
  height: 200px;
}

.element {
  width: 50%;
  height: 100px;
  background-color: tomato;
}

const element = document.querySelector(".element");
const resultat = document.querySelector("#resultat");
const valeursResolues = getComputedStyle(element);
const valeursCalculees = element.computedStyleMap();

resultat.textContent = `valeursResolues.width = ${valeursResolues.width}
valeursCalculees.get("width") = ${valeursCalculees.get("width")}

valeursResolues.height = ${valeursResolues.height}
valeursCalculees.get("height") = ${valeursCalculees.get("height")}

valeursResolues.backgroundColor = ${valeursResolues.backgroundColor}
valeursCalculees.get("background-color") = ${valeursCalculees.get(
  "background-color",
)}`;

Spécifications

Compatibilité des navigateurs

Voir aussi

• La méthode Window.getComputedStyle()