web-dev-qa-db-fra.com

comment obtenir un cadre de sélection pour un élément div dans jQuery

je veux calculer le cadre de sélection pour l'élément div via jquery/javascript.

j'ai essayé comme ça.

//Left side of box 
document.getElementById("myElement").offsetLeft; 
//Top side of box 
document.getElementById("myElement").offsetTop;  
//Right side of box
document.getElementById("myElement").offsetLeft + document.getElementById("myElement").offsetWidth; 
//Bottom side of box 
document.getElementById("myElement").offsetTop + document.getElementById("myElement").offsetHeight;

il retourne des valeurs. s'il s'agit de la manière correcte d'obtenir le cadre de sélection pour l'élément div via jquery / javascript.

j'ai besoin de quelque chose comme getBBox() méthode dans l'élément SVG. il retournera x, y, la largeur et la hauteur d'un élément. De même, comment puis-je obtenir un cadre de sélection pour un élément div.

Merci,

Shiva

javascriptjqueryhtmlcsssvg
39
SivaRajini

Vous pouvez obtenir la boîte englobante de n’importe quel élément en appelant getBoundingClientRect

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

Cela retournera un objet avec les champs left, top, width et height.

65
Robert Longson

Comme cela est spécifiquement étiqueté pour jQuery -

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

ou

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

(Celles-ci sont fonctionnellement identiques, dans certains navigateurs plus anciens, .get() était légèrement plus rapide)

Notez que si vous essayez d'obtenir les valeurs via des appels jQuery, il ne prendra en compte aucune valeur de transformation css, ce qui peut donner des résultats inattendus ...

Remarque 2: dans jQuery 3.0, l'utilisation des appels getBoundingClientRect() appropriés pour ses propres appels de dimension a été modifiée (voir le Guide de mise à niveau de jQuery Core 3. ) - ce qui signifie que l'autre jQuery répond. sera finalement toujours correct - mais seulement lorsque vous utilisez la nouvelle version de jQuery - d’où son appellation de changement radical ...

102
Rycochet

en utilisant JQuery:

myelement=$("#myelement")
[myelement.offset().left, myelement.offset().top,  myelement.width(), myelement.height()]
18
Arpit Agrawal