BOM对象模型应用分析

一、scrollHeight、offsetHeight、clientHeight的区别

• document.documentElement.scrollWidth
• document.documentElement.offsetWidth
• document.documentElement.clientWidth
• document.body.scrollWidth
• document.body.offsetWidth
• document.body.clientWidth

有 6 个属性要测，这 6 个属性要放在 4 种情况中：

• 没有指定 DOCTYPE，网页内容没有超过窗口宽度；
• 没有指定 DOCTYPE，网页内容超过窗口宽度；
• 指定 DOCTYPE，网页内容没有超过窗口宽度；
• 指定 DOCTYPE，网页内容超过窗口宽度；

然后这 4 种情况要放到几个主流浏览器中，假设只有 3 种浏览器：

• IE
• Firefox
• Chrome

算一下，6 * 4 * 3，有 72 种情况。并且不要指望 Firefox 和 Chrome 结果是一样的，不要指望 Firefox 不会出现让您费解的结果。从应用入手简化分析：72 种测试情况确实很繁琐。

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

• 一是 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;

二、获取鼠标的真实位置，兼容各种浏览器

//兼容各种浏览器的,获取鼠标真实位置  function mousePosition(ev) {      if (!ev) ev = window.event;      if (ev.pageX || ev.pageY) {          return { x: ev.pageX, y: ev.pageY };      }      return {          x: ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,          y: ev.clientY + document.documentElement.scrollTop - document.body.clientTop      };  }  

三、获取元素的绝对位置、大小

//获取元素的绝对位置，大小。 参数js对象  function getElAbsolute(elem) {      var t = elem.offsetTop;      var l = elem.offsetLeft;      var w = elem.offsetWidth;      var h = elem.offsetHeight;      elem = elem.offsetParent;      while (elem) {          t += elem.offsetTop;          l += elem.offsetLeft;          elem = elem.offsetParent;      };      return {          top: t,          left: l,          width: w,          height: h      };  }