12.2.3 元素大小

  1. 滚动大小
    scrollHeight：在没有滚动条的情况下，元素内容的总高度
    scrollWidth：在没有滚动条的情况下，元素内容的总宽度
    scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
    scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
  2. 确定元素大小
    getBoundingClientRect()方法。返回一个矩形对象，包含4个属性：left、top、right、bottom。这些属性给出了元素在页面中相对于视口的位置
  1. function getElementLeft(element) {
  2.     var actualLeft = element.offsetLeft;
  3.     var current = element.offsetParent;
  5.     while (current !== null) {
  6.         actualLeft += current.offsetLeft;
  7.         current = current.offsetParent;
  8.     }
  9.     return actualLeft;
  10. }
  12. function getElementTop(element) {
  13.     var actualTop = element.offsetTop;
  14.     var current = element.offsetParent;
  16.     while (current !== null) {
  17.         actualTop += current.offsetTop;
  18.         current = current.offsetParent;
  19.     }
  20.     return actualTop;
  21. }
  23. function getBoundingClientRect(element) {
  24.     var scrollTop = document.documentElement.scrollTop;
  25.     var scrollLeft = document.documentElement.scrollLeft;
  26.     if (element.getBoundingClientRect) {
  27.         if (typeof arguments.callee.offset != "number") {
  28.             var temp = document.createElement("div");
  29.             temp.style.cssText = "position:absolute;left:0;top:0;";
  30.             document.body.appendChild(temp);
  31.             arguments.callee.offset = temp.getBoundingClientRect().top - scrollTop;
  32.             document.body.removeChild(temp);
  33.             temp = null;
  34.         }
  35.         var rect = element.getBoundingClientRect();
  36.         var offset = arguments.callee.offset;
  37.         return {
  38.             left: rect.left + offset,
  39.             right: rect.right + offset,
  40.             top: rect.top + offset,
  41.             bottom: rect.bottom + offset
  42.         };
  43.     } else {
  44.         var actualLeft = getElementLeft(element);
  45.         var actualTop = getElementTop(element);
  46.         return {
  47.             left: actualLeft - scrollLeft,
  48.             right: actualLeft + element.offsetWidth - scrollLeft,
  49.             top: actualTop - scrollTop,
  50.             bottom: actualTop + element.offsetHeight - scrollTop
  51.         }
  52.     }
  53. }