DOM获取元素大小

最近在看JavaScript红皮书，其中关于DOM获取元素大小及位置的种种方法总是容易混淆，DOM获取元素的偏移量（offset）、客户区大小（client）、滚动大小（scroll）以及确定元素大小（getBoundingClientRectangle（）方法）。所以就以此篇文章总结各自所求取的量以及区别。

偏移量（offset）

以上图我们可以清楚的看到offset每个量各自代表的是什么。

提示：offsetparent属性不一定与parentNode的值相等。eg：<td>元素的offsetparent是其祖先元素<table>,因为<table>是DOM层次中距<td>最近的一个有大小的元素。

  function getElementLeft(element){
           var actualLeft = element.offsetLeft;
           var current = element.offsetParent;
           while (current !== null){
               actualLeft += current.offsetLeft;
               current = current.offsetParent;
           }
           return actualLeft;
       }

上述代码是求某个元素在页面上的offsetLeft偏移量，原理为：元素本身的offsetLeft+父亲的offsetLeft+祖父offsetLeft一直加到最外层。

function getElementTop(element){
           var actualTop = element.offsetTop;
           var current = element.offsetParent;
           while (current !== null){
               actualTop += current. offsetTop;
               current = current.offsetParent;
           }
           return actualTop;
       }

上述代码是求某个元素在页面上的offsetTop偏移量，原理为：元素本身的offsetLeft+父亲的offsetTop+祖父offsetTop一直加到最外层。

提示：使用表格和内嵌框架布局的页面，值不太精确（浏览器之间的差异性）。

getElementLeft()=offsetLeft;    getElementTop()=offsetTop;

因为是只读的，每次访问都要重新计算，所以如果重复使用某些值应放在局部变量中存储，提高性能。

客户区大小（client）

以一张图看清每个元素代表的量。

确定浏览器视口时最常用。

因为是只读的，每次访问都要重新计算，所以如果重复使用某些值应放在局部变量中存储，提高性能。

滚动大小（scroll）

同样一张图看清楚每个元素代表的量。

 var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
       var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
       //注意,对于运行在混杂模式下的IE,则需要用document.body 代替document.document-

以上代码为跨浏览器确定文档总高度；

（浏览器间的差异为：

Firefox 中这两组属性始终都是相等的,但大小代表的是文档内容区域的实际尺寸,而非视口的
尺寸。
Opera、Safari 3.1 及更高版本、Chrome 中的这两组属性是有差别的,其中scrollWidth 和
scrollHeight 等于视口大小,而clientWidth 和clientHeight 等于文档内容区域的大小。

IE(在标准模式)中的这两组属性不相等,其中scrollWidth 和scrollHeight 等于文档内
容区域的大小,而clientWidth 和clientHeight 等于视口大小。

）

确定元素大小（getBoundingClientRectangle（）方法）

还没整明白代码，以后更新吧~~

前端小白的进修之路，如有问题请留言指教