首页 > Web开发 > 详细

JS 窗口尺寸数据的获得

时间:2020-03-02 09:04:08      阅读:91      评论:0      收藏: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(availWidth):屏幕可用工作区高(宽)。

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

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

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

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

scrollTo(0,0)
滚动到页面的0,0位置(不管现在在哪)
其中两个零分别是宽度和高度,可以更改,单位是px,如果都是0的话就是滚动到开始

scrollBy(0,0)
在现在的基础上滚动0,0
两个零分别是宽度和高度,可以更改,单位是px

 

 


原文链接:https://blog.csdn.net/csdnxcn/article/details/77886499

JS 窗口尺寸数据的获得

原文:https://www.cnblogs.com/oymo/p/12393288.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!