La méthode getBoundingClientRect() – dimension avec les décimales

3 juillet 2015

Petit post pour présenter une trouvaille du net, la méthode javascript .getBoundingClientRect().

Cette méthode va donner les dimensions d’une élément du DOM ainsi que sa position dans le viewport (position dans la fenêtre à ne pas confondre avec la position dans le document)

Pourquoi ne pas utiliser .outerHeight() ou outerWith() de jQuery ?

Contrairement à ces deux méthodes, .getBoundingClientRect() va vous donner la largeur et la hauteur avec les chiffres sous la virgule.
.outerHeight() et .outerWidth() ne retournent pas les décimales : si votre div fait 20.52 px, ces deux méthodes vont vous retourner 21px (arrondi), ce qui est assez ennuyant pour le calage dans des templates responsives.

Dans des templates, les dimensions sont exprimés en % et non en px, les largeurs et hauteurs vont donc disposer de valeur sous la virgule.

Exemple d’utilisation :
index.html

<html>
  <head>
    <meta charset="UTF-8">
    <title>comparaison .getBoundingClientRect() et .outerWidth()</title>

    <style type="text/css" media="screen">
        #bloc{
            width:100.54px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  </head>
  <body>
       <div id="bloc">Text</div>
  </body>
      <script>
        (function($) {
             console.log('.outerWidth() retourne : '+ $('#bloc').outerWidth());
             console.log('.getBoundingClientRect() retourne : '+ $('#bloc')[0].getBoundingClientRect().width);
         })(jQuery);
    </script>
</html>

Voici le résultat obtenu dans la console de chrome :
comparaisonouterWidth()getBoundingClientRect()

Pour les plus curieux :

.getBoundingClientRect() retourne un objet DOMRect qui dispose de 6 propriétés :

detailDOMRect

Top, Left, Right et Bottom sont déterminés en fonction du viewport et non en fonction du document : si vous défiler vers le bas votre page, les valeurs affichées vous être différentes pour ces propriétés.

Si ce n’est pas le comportement désiré, ajoutez simplement la position de défilement pour obtenir la valeur absolue de votre élément :

$('#bloc')[0].getBoundingClientRect().top+window.scrollX ;
$('#bloc')[0].getBoundingClientRect().bottom+window.scrollX ;
$('#bloc')[0].getBoundingClientRect().left+window.scrollY;
$('#bloc')[0].getBoundingClientRect().right+window.scrollY;

Documentation officielle :

Plus d’informations sur cette méthode sur la page officielle Modzilla US