js窗口尺寸获取常用属性

骑猪看日落 2022-06-09 14:44 225阅读 0赞

**window.innerHeight（innerWidth）：**表示可见区域的高度（宽度），如果底部（右侧）有滚动条，会把底部（右侧）滚动条的高度（宽度）计算进去，**此方法适用于标准浏览器及IE9+**。

**document.documentElement.clientHeight（clientWidth）：**表示可见区域的高度（宽度），不会把滚动条的高度宽度计算进去，**此方法适用于标准浏览器及低版本IE标准模式**。

**document.documentElement.offsetHeight（offsetWidth）：**首先offsetWidth获得的值与clientWidth一样，而offsetHeight获得的是整个文档的高度。

> **注意：**  
> 个人认为上面的documentElement不代表body。当一个element有border时，element.offsetHeight包含border的值，而element.clientHeight不包含border的宽度。  
>

**document.documentElement.scrollHeight（scrollWidth）：**获得网页正文全文高和宽，包含边线宽度。

**document.body.clientHeight（clientWidth）：**首先clientWidth获得的值等于**document.documentElement.offsetWidth**剪去body边线宽度，而clientHeight获得的是整个body的高度减去边线宽度。

**document.body.offsetHeight（offsetWidth）：**获得的值等于**document.body.clientHeight（clientWidth）**加上body的边线（border）宽度，即这两个值取到到的包含边线宽度。

**document.body.scrollHeight（scrollWidth）：**获得网页正文全文高和宽，包含边线宽度。

**document.body.scrollTop（scrollLeft）：**浏览器窗口顶部与文档顶部之间的距离（浏览器窗口与文档左侧之间的距离），也就是滚动条滚动的距离。

**window.pageYOffset（pageXOffset）：**浏览器窗口顶部与文档顶部之间的距离（浏览器窗口与文档左侧之间的距离），也就是滚动条滚动的距离。

**window.screen.height（width）：**屏幕分辨率的高（宽）。

**window.screen.availHeight（avail**W**idth）：**屏幕可用工作区高（宽）。

下面我们来解释一下**offsetTop、clientTop、scrollTop**分别代表什么：

**offsetTop:**距离上方或上层控件的位置，整型，单位像素。

**clientTop:**元素的内容区距离元素边缘的距离，即元素的边线宽度。

**scrollTop:**元素窗口顶部与元素顶部之间的距离，即元素内部滚动条滚动的距离。

还没有评论，来说两句吧...