使用js制作效果時(shí)，我們常常要獲取某個(gè)元素在頁(yè)面上的偏移量(例如tip提示框功能)。而獲取偏移量可以直接獲取相對(duì)于document的偏移量，也可以獲取相對(duì)與視口的偏移量(viewpoint)加上頁(yè)面滾動(dòng)量(scroll)獲得。
1.獲取相對(duì)與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 }}通過(guò)向上迭代offsetParent,可以計(jì)算出相對(duì)于document的偏移量，也就是相對(duì)與頁(yè)面的偏移量。
此方法的問(wèn)題:
1)對(duì)于使用表格和內(nèi)嵌框架布局的頁(yè)面，由于不同瀏覽器實(shí)現(xiàn)元素方式的差異，得到的結(jié)果就不精確了。
2)每次都需要一級(jí)一級(jí)向上查找offsetParent，效率太低。
2.獲取相對(duì)與視口的偏移量(viewpoint)加上頁(yè)面的滾動(dòng)量(scroll)
function getOffsetRect(ele){ var box=ele.getBoundingClientRect(); var body=document.body, docElem=document.documentElement; //獲取頁(yè)面的scrollTop,scrollLeft(兼容性寫(xiě)法) 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) } }此方法直接通過(guò)getBoundingClientRect()方法獲得相對(duì)于視口的偏移量，加上頁(yè)面的滾動(dòng)量，減去clientTop，clientLeft (IE8及更低版本瀏覽器將(2,2)作為起點(diǎn)坐標(biāo)，所以要將值減去起點(diǎn)坐標(biāo)，其他瀏覽器都是已(0,0)作為起點(diǎn)坐標(biāo))。
getBoundingClientRect()方法支持IE,ff3+,safari4+,Orear9,5,Chrome.
3.兼容性寫(xiě)法
//獲取元素相對(duì)于頁(yè)面的偏移function getOffset(ele){ if(ele.getBoundingClientRect){ return getOffsetRect(ele); }else{ return getOffsetSum(ele); }}對(duì)于支持getBoundingClientRect()方法的瀏覽器使用getOffsetRect()方法，不支持的則使用getOffsetSum()方法。
以上所述就是本文的全部?jī)?nèi)容了，希望能夠?qū)Υ蠹覍W(xué)習(xí)javascript有是幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
