当前位置: 代码迷 >> Web前端 >> scrollHeight、clientHeight ,offsetHeight 差异
  详细解决方案

scrollHeight、clientHeight ,offsetHeight 差异

热度:618   发布时间:2012-11-26 11:48:50.0
scrollHeight、clientHeight ,offsetHeight 区别

我认为我们想要两个东西:

?

  • 一是?scrollWidth(scrollHeight),虽然它用处不大,但应该比 offsetWidth(offsetHeight)有用得多。它表示的是文档区的宽度(高度),比如一个网页,特别是门户网站,拖很长,就要把没有显示出来的内容都计算进去。
  • 二是视口 viewport,就是?clientWidth,就是窗口中可显示内容的那块区域,就是我们常常看到页面上飞行广告,飞来飞去,碰到边边要反弹的那一块。

?

测试结果

?

结果很复杂,就不说了,这里只说实际中怎么使用:

?

  • 要使用 scrollWidth,取 document.documentElement.scrollWidth 与 document.body.scrollWidth 的最大值;
  • 要使用 clientWidth,如果 document.documentElement.clientWidth > 0,则使用 document.documentElement.clientWidth,否则使用 document.body.clientWidth。

?

表达式为:

?

  • var scrollWidth =?Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
  • var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

clientHeight
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

内容可视区域是指浏览器最后一个工具条以下到状态栏以上的区域,与页面内容无关,如有滚动条的话则排除滚动条所占的区域

?

?

?

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

IE和Opera下该值一直等于document.body.clientHeight+滚动条高度+窗口边框(IE为4,Opera为0)

?

?

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

?

?

?

//-----------------------------以上是摘自网友博客----------------------------------------

//原文博客地址:http://www.cnblogs.com/wang726zq/archive/2012/05/10/2494256.html

?

//终极自测方法:需要JSLogger组件,请到日志首页自行下载。

?

window.onload = function(){

JSLogger.log("documentElement 的属性 ");

JSLogger.log(document.documentElement,"height");

JSLogger.log("body 的属性 ");

JSLogger.log(document.body,"height");

}

?

?

?

  相关解决方案