快捷導(dǎo)航

js 獲取元素在頁面上的偏移量的方法匯總

更新時間：2015年04月13日 09:01:06 投稿：hebedich

javascript可以通過四個屬性可以獲得元素的偏移量，分別是1、offsetHeight，2、offsetWidth，3、offsetLeft，4、offsetTop，今天我們就來具體談一下獲取頁面元素偏移量的最佳方法。

使用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)對于使用表格和內(nèi)嵌框架布局的頁面，由于不同瀏覽器實現(xiàn)元素方式的差異，得到的結(jié)果就不精確了。

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 兼容火狐瀏覽器bug
        top:Math.round(top),
        left:Math.round(left)
      }
    }

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

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

3.兼容性寫法

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

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

以上所述就是本文的全部內(nèi)容了，希望能夠?qū)Υ蠹覍W(xué)習(xí)javascript有是幫助。

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

js 獲取元素在頁面上的偏移量的方法匯總

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具