本文详细解析了Window、Document及元素对象的各种尺寸与位置属性，如innerWidth、clientWidth、offsetWidth等，帮助读者理解如何获取网页及元素的可视区尺寸、滚动距离及偏移位置。
Window 对象属性
| 属性 | 描述 |
|---|---|
| innerWidth | 返回窗口的文档显示区的宽度。（不包括浏览器控制台、菜单栏、工具栏） |
| innerHeight | 返回窗口的文档显示区的高度。（不包括浏览器控制台、菜单栏、工具栏） |
获取的是可视区的宽高
Document 对象属性
| 属性 | 描述 |
|---|---|
| document.documentElement.clientWidth | 浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具栏、滚动条） |
| document.documentElement.clientHeight | 浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏、滚动条） |
| document.documentElement.offsetHeight | 获取整个文档的高度（包含body的margin） |
| document.body.offsetHeight | 获取整个文档的高度（不包含body的margin） |
| document.documentElement.scrollTop | 返回文档的滚动top方向的距离（当窗口发生滚动时值改变） |
| document.documentElement.scrollLeft | 返回文档的滚动left方向的距离（当窗口发生滚动时值改变） |
元素对象
| 属性 | 描述 |
|---|---|
| element.clientWidth | 返回元素的可见宽度。水平方向 width + 左右padding |
| element.clientHeight | 返回元素的可见高度。 垂直方向 height + 上下padding |
| element.offsetWidth | 返回元素的宽度。水平方向 width + 左右padding + 左右border-width |
| element.offsetHeight | 返回元素的高度。垂直方向 height + 上下padding + 上下border-width |
| element.offsetTop | 返回元素的垂直偏移位置。获取当前元素到 定位父节点 的top方向的距离 |
| element.offsetLeft | 返回元素的水平偏移位置。获取当前元素到 定位父节点 的left方向的距离 |
| element.offsetParent | 返回元素的偏移容器。 |
扫一扫
3206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
