在前端开发中，经常需要获取 DOM 元素的位置和尺寸信息，以便进行布局和交互操作。对于一个 div 元素而言，其边界框是一个重要的属性，它包括了元素的左上角坐标、宽度和高度等信息。本文将介绍如何使用 jQuery 获取 div 元素的边界框，希望能够帮助读者更好地理解 DOM 操作和 jQuery 应用。
什么是边界框？
边界框（bounding box）是一个矩形区域，它完全包围着一个元素。边界框由四个值组成：元素左上角相对于视口左上角的水平偏移量、垂直偏移量、宽度和高度。其中，水平偏移量和垂直偏移量通常称为元素的“位置”，宽度和高度则是元素的“尺寸”。
在 CSS 样式中，可以通过设置元素的 position、left、top、width 和 height 等属性来影响其边界框。但是，这些属性只是定义了元素的外观和位置，浏览器实际呈现出来的边界框可能受到很多因素的影响，例如元素的盒模型、父元素的尺寸和定位方式、文档流等。
使用 jQuery 获取边界框
jQuery 是一个非常流行的 JavaScript 库，它提供了很多简单易用的方法来选取和操作 DOM 元素。其中，offset() 和 width()/height() 方法可以帮助我们获取 div 元素的边界框信息。
offset() 方法
offset() 方法返回一个包含 left 和 top 属性的对象，分别表示元素相对于文档左上角的偏移量。这个偏移量可以用于计算出元素在视口中的位置，结合元素的宽度和高度，就能够得到元素的边界框。
-- -------------------- ---- ------- -- -- -- - ----- ------- --- ------ - ------------ --- ------ - ---------------- --- ----- - --------------- --- ------ - ---------------- --- ----------- - - ----- ------------ ---- ----------- ------ ----------- - ------ ------- ---------- - ------- ------ ------ ------- ------ -- -------------------------
width()/height() 方法
width() 和 height() 方法可以分别返回元素的宽度和高度，不包括 padding、border 和 margin。这些值可以用于计算出元素的右侧坐标和底部坐标，从而得到元素的边界框。
-- -------------------- ---- ------- -- -- ----- - ------- ------- --- -------- - -------------- --- ----- - ----------------- --- ------ - ------------------ --- ------ - ------------------ --- ----------- - - ----- ------------ ---- ----------- ------ ----------- - ------ ------- ---------- - ------- ------ ------ ------- ------ -- -------------------------
注意事项
在使用 jQuery 获取元素的边界框时，有一些需要注意的地方：
- 如果元素的 display 属性为 none，或者它的祖先元素中有一个 display 属性为 none，那么 offset() 和 width()/height() 方法将返回不准确的值。
- 如果元素的 position 属性为 fixed，那么 offset() 方法将返回元素相对于视口左上角的偏移量，而不是相对于文档左上角的偏移量。
- 如果元素的 border-box-sizing 属性为 border-box，那么元素
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30298