使用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有是幫助。
新聞熱點
疑難解答
