JS中获取元素尺寸

最新推荐文章于 2024-04-12 17:46:48 发布

小蓝Lany

最新推荐文章于 2024-04-12 17:46:48 发布

阅读量557

点赞数 2

分类专栏： JS 前端

本文链接：https://blog.csdn.net/weixin_44646986/article/details/104675084

版权

本文详细介绍了JavaScript中用于获取元素尺寸和定位的属性，包括offsetParent、offsetLeft/Top、offsetWidth/Height、clientTop/Left、clientWidth/Height、scrollWidth/Height和scrollLeft/Top。通过实例解析了这些属性在不同情况下的值和应用场景，帮助理解元素在页面布局中的位置和大小计算。

摘要由CSDN通过智能技术生成

offsetParent

文档里每个元素其实都可以找到一个“定位祖先元素”，即由里到外往外层第一层符合下面一个特征的，就是“定位祖先元素”

CSS 定位（position 为 absolute、relative 或 fixed），
<td>、<th>、<table>
<body>

其实CSS的绝对定位也是参考这个“定位祖先元素”的

这个元素可以通过offsetParent来获取到，一般情况下这个元素会是<body>，如下例子

上面说的每个元素，不包括<body><html>，它们的offsetParent为null
另外还有几种情况offsetParent为null

CSS定位为fixed的元素

未出现在文档中的元素（display:none）

<body>
  <div>
    <div id='wrapper'>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum