js获取网页屏幕可视区域高度

js获取⽹页屏幕可视区域⾼度
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象⾼度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域⾼度
看了以上代码，可能会有疑问说body和可见区域到底有什么不同呢，我们在console⾥运⾏⼀下会发现在不同的⽹页中有不同的情况值，有的document.body.clientWidth和document.documentElement.clientWidth 的值相同，有的却不同，原因在哪呢？
原因就是：在浏览器默认的情况下，body有8-10px左右的边距，⽽可见区域包括了这个边距，因此如果我们⽤到body{padding:0;margin:0;}来消除这种默认的情况。

那么document.body.clientWidth和document.documentElement.clientWidth 的值就会相同。

以下是兼容主流浏览器（IE/Firefox/Chrome/Safari）获取浏览器窗⼝可视区域（不包括滚动条）和滚动条位置的代码：
1 // 获取浏览器窗⼝的可视区域的宽度
2 function getViewPortWidth() {
3 return document.documentElement.clientWidth || document.body.clientWidth;
4 }
5
6 // 获取浏览器窗⼝的可视区域的⾼度
7 function getViewPortHeight() {
8 return document.documentElement.clientHeight || document.body.clientHeight;
9 }
10
11 // 获取浏览器窗⼝⽔平滚动条的位置
12 function getScrollLeft() {
13 return document.documentElement.scrollLeft || document.body.scrollLeft;
14 }
15
16 // 获取浏览器窗⼝垂直滚动条的位置
17 function getScrollTop() {
18 return document.documentElement.scrollTop || document.body.scrollTop;
19 }
⽹页可见区域宽： document.body.offsetWidth (包括边线的宽)
⽹页可见区域⾼： document.body.offsetHeight (包括边线的⾼)
⽹页正⽂部分上： window.screenTop
⽹页正⽂部分左： window.screenLeft
屏幕分辨率的⾼： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可⽤⼯作区⾼度： window.screen.availHeight
屏幕可⽤⼯作区宽度： window.screen.availWidth
// 部分jQuery函数
$(window).height() //浏览器时下窗⼝可视区域⾼度
$(document).height() //浏览器时下窗⼝⽂档的⾼度
$(document.body).height() //浏览器时下窗⼝⽂档body的⾼度
$(document.body).outerHeight(true)　//浏览器时下窗⼝⽂档body的总⾼度包括border padding margin
$(window).width() //浏览器时下窗⼝可视区域宽度
$(document).width()//浏览器时下窗⼝⽂档对于象宽度
$(document.body).width() //浏览器时下窗⼝⽂档body的⾼度
$(document.body).outerWidth(true)　//浏览器时下窗⼝⽂档body的总宽度包括border padding
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动⾼度。

scrollLeft:设置或获取位于对象左边界和窗⼝中⽬前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗⼝中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版⾯或由⽗坐标 offsetParent 属性指定的⽗坐标的⾼度
offsetLeft:获取对象相对于版⾯或由 offsetParent 属性指定的⽗坐标的计算左侧位置offsetTop:获取对象相对于版⾯或由 offsetTop 属性指定的⽗坐标的计算顶端位置
event.clientX 相对⽂档的⽔平座标
event.clientY 相对⽂档的垂直座标
event.offsetX 相对容器的⽔平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直⽅向滚动的值
event.clientX+document.documentElement.scrollTop 相对⽂档的⽔平座标+垂直⽅向滚动的量。