网页元素位置计算

最新推荐文章于 2023-04-09 17:22:24 发布

楽BB

最新推荐文章于 2023-04-09 17:22:24 发布

阅读量346

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43450479/article/details/106970209

版权

25 篇文章 0 订阅

订阅专栏

window.innerHeight 返回窗口的文档显示区的宽高
```
window.innerHeight;
window.innerWidth;
```
window.outerHeight 属性获取加上工具条与滚动条窗口的宽度与高度
```
window.outerHeight;
window.outerWidth;
```
pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素
```
window.pageXOffset;
window.pageYOffset;
```
```
window.scrollX;
window.scrollY;
```

如果需要更好的跨浏览器兼容性，请使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY

document.documentElement.clientHeight 获取网页文档可见区域宽高

如果不是documentElement元素，则返回该元素自身的宽高
```
ele.clientWidth;
ele.clientHeight;
```
document.documentElement.scrollTop 获取文档滚动距离

document.documentElement.scrollTop和window.pageXOffset的结果是一样的
document.documentElement.scrollHeight 获取网页文档全文宽高

document.body.scrollHeight计算得到的值是一样的
ele.offsetTop

获取元素偏移，该元素对于浏览器的滚动条偏移

getBoundingClientRect()用于获取某个元素相对于视窗的位置集合，返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组位置和矩形的集合

let rect = obj.getBoundingClientRect();

在这里插入图片描述

上面的图片为DOMRect对象的属性，除了width 和 height 以外的属性，都是相对于视图窗口的左上角来计算的

width和height为元素的宽高

其余相对于视窗（viewport，可视区域）的位置

在这里插入图片描述

offsetWidth：元素在水平方向上占据的大小，无单位
```
offsetWidth = border  + 元素内容宽度 + padding
```
offsetHeight元素在垂直方向上占据的大小，无单位
```
offsetHeight = border  + 元素内容高度 + padding 
```