当前位置: 移动技术网 > IT编程>开发语言>JavaScript > js窗口尺寸获取常用属性

js窗口尺寸获取常用属性

2019年06月09日  | 移动技术网IT编程  | 我要评论

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:元素窗口顶部与元素顶部之间的距离,即元素内部滚动条滚动的距离。

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网