Javascript – window.getComputedStyle renvoie «auto» en tant que propriétés d’élément supérieure et gauche

Sur ma page Web, j’ai des éléments (div, sous-div, boutons, etc.) dont la position est générée par rapport à la div dans laquelle ils se trouvent et les uns par rapport aux autres. Cela a pour résultat qu’en utilisant window.getComputedStyle , les propriétés top et left n’ont pas de valeur numérique, mais simplement “auto” alors que la largeur et la hauteur sont en px.

Le problème pour lequel j’ai besoin des valeurs absolues à des fins de mesure, je me demandais s’il était possible de les obtenir d’une manière ou d’une autre. J’espérais que window.getComputedStyle ferait l’affaire, mais ce n’est évidemment pas le cas.

Voici un exemple ci-dessous, sans aucune mise en forme mais avec le même problème.

S’il existe une solution jQuery, je l’apprécierais également.

Sincères amitiés,
JaySon

  Test  function test() { var style = window.getComputedStyle(document.getElementsByTagName("button")[0]); alert ( "top = " + style.top + //auto "\nleft = " + style.left + //auto "\nwidth = " + style.width + //63px "\nheight = " + style.height //24px ); }

La méthode getComputedStyle renvoie la valeur résolue des propriétés CSS.

Si l’auteur de la feuille de style (vous) n’a pas spécifié de valeur pour certaines propriétés CSS (c’est-à-dire: haut, droite, bas et gauche), la valeur résolue renvoyée sera la valeur par défaut. Ces propriétés CSS ont toutes une valeur par défaut de “auto”.

Si vous ne pouvez pas ou ne voulez pas spécifier vous-même une valeur dans la feuille de style et que vous n’avez besoin que de coordonnées relatives en haut à gauche de la fenêtre, envisagez d’utiliser Element.getBoundingClientRect () :

   Test

Il n’y a rien à calculer en top et à left lorsque l’élément a une position calculée définie sur static (c’est la valeur par défaut). top et à left sont pas pertinents dans ce cas.