Window : méthode getDefaultComputedStyle()
Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.
La méthode getDefaultComputedStyle() de l'interface Window retourne les valeurs calculées par défaut de toutes les propriétés CSS d'un élément, en ignorant la mise en forme de l'auteur·ice. Seuls les styles de l'agent utilisateur et de l'utilisateur·ice sont pris en compte.
Syntaxe
getDefaultComputedStyle(element)
getDefaultComputedStyle(element, pseudoElt)
Paramètres
element-
Un objet
Elementpour lequel obtenir la mise en forme calculée. pseudoEltFacultatif-
Une chaîne de caractères définissant le pseudo-élément à correspondre. Doit être
null(ou non spécifié) pour les éléments ordinaires.
Valeur de retour
L'objet style retourné est un objet CSSStyleDeclaration. L'objet est du même type que celui retourné par Window.getComputedStyle(), mais ne prend en compte que les règles de l'agent utilisateur et de l'utilisateur·ice.
Exemples
Exemple simple
const elem = document.getElementById("elemId");
const style = getDefaultComputedStyle(elem);
Exemple plus long
<div id="elem-container">sac-de-paille</div>
<div id="output"></div>
#elem-container {
position: absolute;
left: 100px;
top: 200px;
height: 100px;
}
const elem = document.getElementById("elem-container");
const theCSSprop = getDefaultComputedStyle(elem).position;
document.getElementById("output").textContent = theCSSprop; // outputs "static"
Utiliser avec les pseudo-éléments
La méthode getDefaultComputedStyle() peut récupérer des informations de style depuis des pseudo-éléments (par exemple, ::before ou ::after).
<h3>contenu généré</h3>
h3::after {
content: " licorne !";
}
const h3 = document.querySelector("h3");
const result = getDefaultComputedStyle(h3, "::after").content;
console.log("le contenu généré est : ", result); // returns 'none'
Notes
La valeur retournée est, dans certains cas connus, expressément incorrecte par intention délibérée. En particulier, pour éviter le problème de sécurité appelé fuite de l'historique CSS, les navigateurs peuvent expressément « mentir » sur la valeur utilisée pour un lien et toujours retourner des valeurs comme si un·e utilisateur·ice n'avait jamais visité le site lié, et/ou limiter les styles qui peuvent être appliqués via l'utilisation du pseudo-sélecteur :visited. Voir https://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/ (angl.) et https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ (angl.) pour des exemples de la manière dont cela est mis en œuvre.
Spécifications
Proposé au groupe de travail CSS.