Obtenir le cadre de délimitation d'un élément div : méthode d'implémentation de jQuery

Question

Je souhaite calculer le cadre de délimitation d'un élément div via jQuery/JavaScript.

J'ai essayé le code suivant :

//Le côté gauche de la boîte
document.getElementById("myElement").offsetLeft;
//Haut de la boîte
document.getElementById("myElement").offsetTop;
//côté droit de la boîte
document.getElementById("myElement").offsetLeft + document.getElementById("myElement").offsetWidth;
//bas de la boîte
document.getElementById("myElement").offsetTop + document.getElementById("myElement").offsetHeight;

Il renvoie une valeur. Est-ce la bonne façon d'obtenir le cadre de délimitation d'un élément div via jQuery/JavaScript.

J'ai besoin de quelque chose de similaire à la méthode getBBox() Il renverra les valeurs x, y, width et height de l'élément. De même, comment puis-je obtenir le cadre de délimitation d’un élément div ?

Answer 1

Puisque ceci est spécifiquement marqué pour jQuery -

$("#myElement")[0].getBoundingClientRect();

ou

$("#myElement").get(0).getBoundingClientRect();

(Les deux sont fonctionnellement identiques, .get() est légèrement plus rapide dans certains navigateurs plus anciens)

Veuillez noter que si vous essayez d'obtenir la valeur via un appel jQuery, il ne prendra en compte aucune valeur de transformation CSS, ce qui peut conduire à des résultats inattendus...

Remarque 2 : Dans jQuery 3.0, il a été modifié pour utiliser l'appel getBoundingClientRect() approprié pour ses propres appels de taille (voir Guide de mise à niveau jQuery Core 3.0) - ce qui signifie que les autres réponses jQuery seront finalement toujours correctes - mais seulement si Seulement correctes quand utiliser de nouvelles versions de jQuery - c'est pourquoi cela s'appelle un changement radical...

Answer 2

Vous pouvez obtenir le cadre de délimitation de n'importe quel élément en appelant la méthode getBoundingClientRect.

var rect = document.getElementById("myElement").getBoundingClientRect();

Cela renverra un objet avec les champs gauche, haut, largeur et hauteur.