DOM中的元素位置和大小的計算方法，含jquery和dojo方法

原生維度屬性

DOM中設計到位置和大小的幾個做用在Element上的屬性有下面一個列表。按照DOM標準，它們應該以下。但不一樣的瀏覽器會存在差別。

屬性名	做用域	讀寫	描述
offsetTop	DOM node	只讀	元素上外邊框距離包含它的定位元素(offsetParent)或根節點的上內邊框距離。
offsetLeft	DOM node	只讀	元素左外邊框距離包含它的定位元素(offsetParent)或根節點的左內邊框距離。
offsetWidth	DOM node	只讀	元素的左右邊框寬度+左右內邊距+內容區width
offsetHeight	DOM node	只讀	元素的上下邊框寬度+上下內邊距+內容區height
offsetParent	DOM node	只讀	包含元素的最近的已經定位元素，若是沒有則爲null.
clientTop	DOM node	只讀	元素上邊框寬度
clientLeft	DOM node	只讀	元素左邊框寬度
clientWidth	DOM node	只讀	左右內邊距+內容區width
clientHeight	DOM node	只讀	上下內邊距+內容區height
scrollTop	DOM node	讀寫	內容區隱藏在可見區域之外，距離最高內邊框的長度。可經過寫來改變滾動條位置。(body例外）
scrollLeft	DOM node	讀寫	內容區隱藏在可見區域之外，距離最左邊內邊框的距離。（body例外）
scrollWidth	DOM node	只讀	滾動區域的內容的寬度，可能會超過clientWidth
scrollHeight	DOM node	只讀	滾動區域的內容的高度，可能會超過clientHeight
innerWidth	window	只讀	瀏覽器視窗的寬度
innerHeight	window	只讀	瀏覽器視窗的高度

根據上面的表格，若是想計算一個element上外邊框距離document最頂端的距離，應該用下面的計算方法：

var distance=e.offsetTop; //元素外邊框距離父元素內邊框距離
    var parent=e.offsetParent;
    while(parent){
      distance += parent.clientTop; //加上父元素邊框寬度
      distance += parent.offsetTop; //加上父元素外邊框到下個包含元素內邊框距離
      parent = parent.offsetParent;
    }

上面沒有考慮一種很是稀有的案例，就是在body上設置了margin和border。這種狀況很是少見，但若是真出現了，則必須注意。上面的code沒法在全部的瀏覽器中工做。例如，chrome的body子元素的offsetTop是子元素到document最外邊界的距離，body的margin，border都已經被算在其中，然而firefox則相反。

獲取一個元素的內容區高度，應該使用：

var height = element.clientHeight>element.scrollHeight ? element.clientHeight : element.scrollHeight;

由於任何元素都可經過設置overflow來設置滾動條，因此任何元素都可設置scrollTop來使其滾動條滾動。 但最多見的仍是根節點的scrollTop。由於大部分網頁都只在最外層存在着一個滾動條。

最外層的滾動條位置的獲取與設置在不一樣的瀏覽器不一樣：

FF+IE: document.documentElement.scrollTop

Chrome: document.body.scrollTop

座標

原生JS

元素座標存在兩種：

1. 以document最左上頂點爲原點。獲取元素在整個document中的位置。

2. 以瀏覽器視窗（viewport)最左上頂點爲原點。獲取元素在視窗中的位置。

第一種座標用於設置滾動條，例如，將滾動條滾動到element正好出現的位置。獲取座標的函數以下：

function getPositionInDoc(element) {
  var position = {};
  position.offsetY = (function(e){
    var distance=e.offsetTop; 
    var parent=e.offsetParent;
    while(parent){
      distance += parent.clientTop; 
      distance += parent.offsetTop; 
      parent = parent.offsetParent;
    }
    return distance;
  })(element);
  
  position.offsetX = (function(e){
    var distance=e.offsetLeft; 
    var parent=e.offsetParent;
    while(parent){
      distance += parent.clientLeft; 
      distance += parent.offsetLeft; 
      parent = parent.offsetParent;
    }
    return distance;
  })(element);
  
  return position;
}

將滾動條滾動到某個元素位置：

// chrome:  
document.body.scrollTop = getPositionInDoc(element).offsetY;
// FF and IE:      
document.documentElement.scrollTop = getPositionInDoc(element).offsetY;

第二種座標是在瀏覽器視窗(viewport)的位置，這類座標用於實現popup. 瀏覽器提供了一個方法getBoundingClientRect()。經過此方法能夠得到元素座標：

// rect = {
//   top: 元素上外邊框距離視窗頂部的距離, 負值表示上外邊框超出了視窗上邊界。
//   bottom：元素下外邊框距離視窗頂部的距離, 能夠爲負值。
//   right: 元素右外邊框距離視窗左邊的距離, 能夠爲負值。
//   left: 元素左外邊框距離視窗左邊的距離, 能夠爲負值。
// }
var rect = element.getBoundingClientRect();

能夠經過第二種座標，推導第一種座標，而不須要再用循環的方式計算：

offsetY = rect.top + document.documentElement.scrollTop;
offsetX = rect.left + document.documentElement.scrollLeft;

反之也可。

JQuery

$.fn.width(/*optional*/ value)	獲取或設置width
$.fn.innerWidth()	獲取width+padding
$.fn.outerWidth(/*boolean*/includeMargin)	獲取width+padding+border (+margin)
$.fn.height(/*optional*/ value)	獲取或設置height
$.fn.innerHeight()	獲取height+padding
$.fn.outerHeight(/*boolean*/includeMargin)	獲取height+padding+border (+margin)
$.fn.offset(/*optional*/ coordination)	獲取元素相對於document的位置或移動元素到相應位置
$.fn.scrollLeft(/*optional*/ value)	獲取或設置scrollLeft
$.fn.scrollTop(/*optional*/ value)	獲取或設置scrollTop

維度

使用jQuery獲取元素的高和寬很是簡單，下圖是從w3上獲取的，此圖解釋了$.fn下的6個方法的含義

此外，若是想獲取document的高度和寬度，則可使用$(document).width() 和 $(document).height().

若是想獲取視窗的大小，則可使用$(window).width() 和 $(window).height().

座標

獲取元素在document中的座標很是簡單，只須要調用$(element).offset(). 此方法將返回{top, left}. 還可使用offset({top, left})的方式，設置element的位置。element將會被設置position:relative.

獲取元素在視窗(viewport)中的座標, 則能夠直接使用原生的getBoundingClientRect()。

獲取scrollTop, scrollLeft和設置scrollTop，scrollLeft的方法

var scrollTop = $(document).scrollTop();
$(document).scrollTop(200); // scroll to 200px.
var scrollLeft = $(document).scrollLeft();
$(document).scrollLeft(100); // scroll to 100px.

dojo

dojo/dom-geometry

在dojo下，獲取元素的位置和大小是由模塊dojo/dom-geometry完成的，其幾個經常使用方法：

position(node, includeScroll)	當includeScroll爲true時，返回相對於document的座標， false則返回相對於視窗viewport的座標。 返回值：{ w: 300: h: 150, x: 700, y: 900, } w：width+padding+border h: height+padding+border x,y爲左上角外邊框交點的座標。
docScroll()	返回值 {x: 10, y:10} 獲取document滾動值。
其它更詳細方法	能夠參見dojo api

dojo/window

而在模塊dojo/window下，存在着關於viewport的方法：

getBox()	獲取視窗viewport的大小。寬度和高度。 返回值 {w: 100px, h:200px}
scrollIntoView(node)	將滾動條滾動到node能顯示出來的位置。

使用方法以下：

require(['dojo/window', 'dojo/dom-geometry'], function(win, geom) {
  var box = win.getBox();
  var position = geom.position(element,false);
});