【转】关于top、clientTop、scrollTop、offsetTop等

1 2 3 4

clientWidth = width - border clientHeight = height - border offsetWidth = width offsetHeight = height

IE，FireFox 差异如下： 

IE6.0、FF1.06+：

1 2 3 4

clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding + border offsetHeight = height + padding + border

IE5.0/5.5：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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;

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