JavaScript获取浏览器高度和宽度值

JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)

IE中：

document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

FireFox中： 

document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

Opera中： 

document.body.clientWidth ==> 可见区域宽度

document.body.clientHeight ==> 可见区域高度

document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

没有定义W3C的标准，则

IE为： 

document.documentElement.clientWidth ==> 0

document.documentElement.clientHeight ==> 0

FireFox为：

document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽)

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

Opera为： 

document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

(注意：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

HTML精确定位：scrollLeft、scrollWidth、clientWidth、offsetWidth

scrollWidth ==> 获取对象的滚动宽度
scrollHeight ==>  获取对象的滚动高度
scrollLeft ==> 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离（被卷去的左）
scrollTop ==> 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离（被卷去的高）
offsetLeft ==> 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop ==> 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetHeight ==> 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

event.clientX ==> 相对文档的水平座标

event.clientY ==> 相对文档的垂直座标

event.offsetX ==> 相对容器的水平坐标

event.offsetY ==> 相对容器的垂直坐标

document.documentElement.scrollTop ==> 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop ==> 相对文档的水平座标+垂直方向滚动的量

附录1：

js 判断滚动条是否到达底部

scrollTop : 滚动条在Y轴上的滚动距离。 
clientHeight : 内容可视区域的高度。 
scrollHeight : 内容可视区域的高度加上溢出（滚动）的距离。

原生js实现

window.onscroll=function(){if(check()){alert("到底了")}}function check(){var scrollHeight = document.documentElement.scrollHeight;var clientHeight = document.documentElement.clientHeight;var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; return scrollHeight == clientHeight + scrollTop ? true:false;}

jquery实现

$(window).scroll(function(){　　var scrollTop = $(this).scrollTop();　　var scrollHeight = $(document).height();　　var windowHeight = $(this).height();　　if(scrollTop + windowHeight == scrollHeight){　　　　alert("到底了");　　}});

附录2：

js 判断鼠标滚轮向上向下滚动

var scrollFunc = function (e) {          e = e || window.event;          if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件                           if (e.wheelDelta > 0) { //当滑轮向上滚动时                  alert("滑轮向上滚动");              }              if (e.wheelDelta < 0) { //当滑轮向下滚动时                  alert("滑轮向下滚动");              }          } else if (e.detail) {  //Firefox滑轮事件 与IE,谷歌方向相反             if (e.detail < 0) { //当滑轮向上滚动时                  alert("滑轮向上滚动");              }              if (e.detail > 0) { //当滑轮向下滚动时                  alert("滑轮向下滚动");              }          }      }      //给页面绑定滑轮滚动事件      if (document.addEventListener) {//firefox          document.addEventListener('DOMMouseScroll', scrollFunc, false);      }      //滚动滑轮触发scrollFunc方法       window.onmousewheel = scrollFunc;