Obtenir le cadre de délimitation d'un élément div : méthode d'implémentation de jQuery
P粉207483087
2023-08-22 11:18:36
<p>Je souhaite calculer le cadre de délimitation d'un élément div via jQuery/JavaScript. </p>
<p>J'ai essayé le code suivant : </p>
<pre class="brush:php;toolbar:false;">//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;</pre>
<p>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. </p>
<p>J'ai besoin de quelque chose de similaire à la méthode <code>getBBox()</code> Il renverra les valeurs <code>x</code>, <code>y</code>, <code>width</code> et <code>height</code> de l'élément. De même, comment puis-je obtenir le cadre de délimitation d’un élément div ? </p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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...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.