js 擷取元素在頁面上的位移量的方法匯總，js位移量

js 擷取元素在頁面上的位移量的方法匯總，js位移量

使用js製作效果時，我們常常要擷取某個元素在頁面上的位移量(例如tip提示框功能)。而擷取位移量可以直接擷取相對於document的位移量，也可以擷取相對與視口的位移量(viewpoint)加上頁面滾動量(scroll)獲得。

1.擷取相對與document的位移量

function getOffsetSum(ele){  var top= 0,left=0;  while(ele){    top+=ele.offsetTop;    left+=ele.offsetLeft;    ele=ele.offsetParent;  }  return {    top:top,    left:left  }}

通過向上迭代offsetParent,可以計算出相對於document的位移量，也就是相對與頁面的位移量。

此方法的問題:

1)對於使用表格和內嵌架構布局的頁面，由於不同瀏覽器實現元素方式的差異，得到的結果就不精確了。

2)每次都需要一級一級向上尋找offsetParent，效率太低。

2.擷取相對與視口的位移量(viewpoint)加上頁面的滾動量(scroll)

function getOffsetRect(ele){      var box=ele.getBoundingClientRect();      var body=document.body,        docElem=document.documentElement;      //擷取頁面的scrollTop,scrollLeft(相容性寫法)      var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop,        scrollLeft=window.pageXOffset||docElem.scrollLeft||body.scrollLeft;      var clientTop=docElem.clientTop||body.clientTop,        clientLeft=docElem.clientLeft||body.clientLeft;      var top=box.top+scrollTop-clientTop,        left=box.left+scrollLeft-clientLeft;      return {        //Math.round 相容Firefox瀏覽器bug        top:Math.round(top),        left:Math.round(left)      }    }

此方法直接通過getBoundingClientRect()方法獲得相對於視口的位移量，加上頁面的滾動量，減去clientTop，clientLeft (IE8及更低版本瀏覽器將(2,2)作為起點座標，所以要將值減去起點座標，其他瀏覽器都是已(0,0)作為起點座標)。

getBoundingClientRect()方法支援IE,ff3+,safari4+,Orear9,5,Chrome.

3.相容性寫法

//擷取元素相對於頁面的位移function getOffset(ele){  if(ele.getBoundingClientRect){    return getOffsetRect(ele);  }else{    return getOffsetSum(ele);  }}

對於支援getBoundingClientRect()方法的瀏覽器使用getOffsetRect()方法，不支援的則使用getOffsetSum()方法。

以上所述就是本文的全部內容了，希望能夠對大家學習javascript有是協助。