听雨

专,静,谦,筹,悟,慎,透,恒
  博客园  :: 首页  :: 新随笔  :: 管理

[转贴]Js中 关于top、clientTop、scrollTop、offsetTop等

Posted on 2008-12-07 11:15  听雨  阅读(352)  评论(0编辑  收藏  举报

http://topic.csdn.net/u/20081205/16/33adbe19-ee41-4edb-adad-e1e595861ae5.html

IE,FireFox 差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5:
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height


<script type="text/javascript">
<!-- var winWidth = 0; 
var winHeight = 0; 
function findDimensions() //函数:获取尺寸 
{  //获取窗口宽度 
if (window.innerWidth) 
winWidth = window.innerWidth; 
else if ((document.body) && (document.body.clientWidth)) 
winWidth = document.body.clientWidth;  //获取窗口高度 
if (window.innerHeight) 
winHeight = window.innerHeight; 
else if ((document.body) && (document.body.clientHeight)) 
winHeight = document.body.clientHeight;  //通过深入Document内部对body进行检测,获取窗口大小 
if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth) 

winHeight = document.documentElement.clientHeight; 
winWidth = document.documentElement.clientWidth; 
}  //结果输出至两个文本框 
document.form1.availHeight.value= winHeight; 
document.form1.availWidth.value= winWidth; 
}  findDimensions();  //调用函数,获取数值 
window.onresize=findDimensions;
//--> </script>








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