4 votes

Comment déterminer si la hauteur ou la largeur d'un élément est définie à 100% ou `auto` en CSS en utilisant du JS vanilla?

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

-3voto

farhad shah Points 3

Pour obtenir la valeur de l'élément, vous devez d'abord définir la largeur de l'élément à 100% à l'aide du CSS, puis définir l'identifiant de l'élément et obtenir la largeur avec JS, cela renvoie 100

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X