页面距离总结

jQuery 获取屏幕高度、宽度

作手机Web开发作浏览器兼容用到了，因此在网上找了些汇总下。

alert($(window).height()); //浏览器当前窗口可视区域高度 

alert($(document).height()); //浏览器当前窗口文档的高度 

alert($(document.body).height());//浏览器当前窗口文档body的高度 

alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin 

alert($(window).width()); //浏览器当前窗口可视区域宽度 

alert($(document).width());//浏览器当前窗口文档对象宽度 

alert($(document.body).width());//浏览器当前窗口文档body的高度 

alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin 

document.body.scrollTop用法

网页可见区域宽： 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;

function screenInfo(){   var  s = "";   s += "\r\n网页可见区域宽："+ document.body.clientWidth;   s += "\r\n网页可见区域高："+ document.body.clientHeight;   s += "\r\n网页可见区域宽："+ document.body.offsetWidth  +" (包括边线的宽)";   s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";   s += "\r\n网页正文全文宽："+ document.body.scrollWidth;   s += "\r\n网页正文全文高："+ document.body.scrollHeight;   s += "\r\n网页被卷去的高："+ document.body.scrollTop;   s += "\r\n网页被卷去的左："+ document.body.scrollLeft;   s += "\r\n网页正文部分上："+ window.screenTop;   s += "\r\n网页正文部分左："+ window.screenLeft;   s += "\r\n屏幕分辨率的高："+ window.screen.height;   s += "\r\n屏幕分辨率的宽："+ window.screen.width;   s += "\r\n屏幕可用工做区高度："+ window.screen.availHeight;   s += "\r\n屏幕可用工做区宽度："+ window.screen.availWidth;   console.log(s);}screenInfo();

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 相对文档的水平座标+垂直方向滚动的量 Post by molong on 2009-05-19 11:57 PM #1 要获取当前页面的滚动条纵坐标位置，用： document.documentElement.scrollTop; 而不是： document.body.scrollTop; documentElement 对应的是 html 标签，而 body 对应的是 body 标签。 在标准w3c下，document.body.scrollTop恒为0，须要用document.documentElement.scrollTop来代替; 若是你想定位鼠标相对于页面的绝对位置时，你会发现google里面1000篇文章里面有999.99篇会让你使用 event.clientX+document.body.scrollLeft，event.clientY+document.body.scrollTop， 若是你发现你的鼠标定位偏离了你的想象，请不要奇怪，这是再正常不过的事情。 ie5.5以后已经不支持document.body.scrollX对象了。 因此在编程的时候，请加上这样的判断 if (document.body && document.body.scrollTop && document.body.scrollLeft) { top=document.body.scrollTop; left=document.body.scrollleft;  } if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft) { top=document.documentElement.scrollTop; left=document.documentElement.scrollLeft; }