Comment puis-je déterminer si un élément a sa largeur/hauteur CSS définie sur 'auto' ou '100%' en utilisant vanilla JS et une solution compatible avec tous les navigateurs ?
En utilisant la propriété style, ne renvoie que les styles en ligne qui sont définis.
document.querySelector("#foo").style.height
Renvoie: ""
En utilisant getComputedStyle donne une valeur d'unité.
getComputedStyle(document.querySelector("#foo")).height
Renvoie: "334.641px"
Le résultat que je recherche devrait renvoyer quelle valeur est définie sur l'élément
Renvoyer "auto"
ou
Renvoyer "80%"
Il y a un ancien post de 2011 sur le parcours des feuilles de style, mais les navigateurs ont beaucoup évolué depuis. Il doit sûrement y avoir actuellement une meilleure méthode?
Par exemple, l'inspecteur de propriétés calculées de Chrome affichera la propriété de style sous la valeur px calculée (il y a une petite flèche déroulante si la propriété a été définie via CSS). Il le fait via computedStyleMap() dans la réponse suivante, mais tous les navigateurs ne l'implémentent pas.
width: 385px;
100%. .w-full tailwinds.css:6366