Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章 https://0x9.me/KMrv3

一、网页可见区域宽高(浏览器窗口可视区域大小)

不包括工具栏和滚动条

  • 1.对于IE9+、chrome、firefox、Opera、Safari： 
1
2
3
4
// 浏览器窗口的内部高度
let height = window.innerHeight;
// 浏览器窗口的内部宽度
let width = window.innerWidth;
  • 2.对于IE8.7.6.5:
1
2
3
4
// 表示HTML文档所在窗口的当前高度
let height = document.documentElement.clientHeight;
// 表示HTML文档所在窗口的当前宽度
let width = document.documentElement.clientWidth;

或者，因为document对象的body属性对应HTML文档的<body>标签，所以也可表示为： 

1
2
3
4
// 表示HTML文档所在窗口的当前高度
let height = document.body.clientHeight;
// 表示HTML文档所在窗口的当前宽度
let width = document.body.clientWidth;

结论：
document.body.clientWidth/Height 的宽高偏小，高甚至默认200；
document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的宽高始终相等。
所以在不同浏览器都实用的的Javascripit方案： 

1
2
let height = document.documentElement.clientWidth || document.body.clientWidth;
let width = document.documentElement.clientHeight || document.body.clientHeight;

二、网页正文全文宽高

scrollWidth 和 scrollHeight 获取网页内容高度和宽度:

  • 1.针对IE.Opera：
    scrollHeight是网页内容实际高度，可以小于clientHeight;

  • 2.针对NS.firefox：
    scrollHeight是网页内容高度，不过最小值是clientHeight;也就是说网页内容实际高度小于clientHeight的时候，scrollHeight返回clientHeight；

  • 3.浏览器兼容代码：

1
2
let height = document.documentElement.scrollHeight || document.body.scrollHeight;
let width = document.documentElement.scrollWidth || document.body.scrollWidth;

三、网页可见区域宽高，包括滚动条等边线（会随窗口的显示大小改变）

  • 1.值：
    offsetWidth = scrollWidth + 左右滚动条 + 左右边框；
    offsetHeight = scrollHeight + 上下滚动条 + 上下边框；

  • 2.浏览器兼容代码： 

1
2
let width = document.documentElement.offsetWidth || document.body.offsetWidth ;  
let height = document.documentElement.offsetHeight || document.body.offsetHeight ;

四、网页卷去的距离与偏移量

1.scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离；
2.scrollTop:设置或获取位于给定对象最顶端与窗口中目前可见内容的最左端之间的距离；
3.offsetLeft:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置；
4.offsetTop:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置；

常用高度/宽度获取的整理

  • 1.获取屏幕的高度和宽度（屏幕分辨率）： 
1
2
window.screen.height
window.screen.width
  • 2.获取屏幕工作区域的高度和宽度（去掉状态栏）： 
1
2
window.screen.availHeight
window.screen.availWidth
  • 3.网页全文的高度和宽度： 
1
2
document.body.scrollHeight
document.body.scrollWidth
  • 4.滚动条卷上去的高度和向右卷的宽度： 
1
2
document.body.scrollTop
document.body.scrollLeft
  • 5.网页可见区域的高度和宽度（不加边线）： 
1
2
document.body.clientHeight
document.body.clientWidth
  • 6.网页可见区域的高度和宽度（加边线）： 
1
2
document.body.offsetHeight
document.body.offsetWidth