js 獲取元素在頁面上的偏移量的方法匯總
使用js制作效果時(shí),我們常常要獲取某個(gè)元素在頁面上的偏移量(例如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,可以計(jì)算出相對于document的偏移量,也就是相對與頁面的偏移量。
此方法的問題:
1)對于使用表格和內(nèi)嵌框架布局的頁面,由于不同瀏覽器實(shí)現(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)作為起點(diǎn)坐標(biāo),所以要將值減去起點(diǎn)坐標(biāo),其他瀏覽器都是已(0,0)作為起點(diǎn)坐標(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有是幫助。
- javascript innerHTML、outerHTML、innerText、outerText的區(qū)別
- javascript innerText和innerHtml應(yīng)用
- JavaScript中innerHTML,innerText,outerHTML的用法及區(qū)別
- javascript中innerText和innerHTML屬性用法實(shí)例分析
- js中innerText/textContent和innerHTML與target和currentTarget的區(qū)別
- JavaScript動態(tài)改變HTML頁面元素例如添加或刪除
- 快速解決js動態(tài)改變dom元素屬性后頁面及時(shí)渲染的問題
- 離開頁面時(shí)檢測表單元素是否被修改,提示保存的js代碼
- JavaScript獲取頁面上某個(gè)元素的代碼
- js使用文檔就緒函數(shù)動態(tài)改變頁面內(nèi)容示例【innerHTML、innerText】
相關(guān)文章
javascript算法之?dāng)?shù)組反轉(zhuǎn)
這篇文章主要介紹了javascript算法之?dāng)?shù)組反轉(zhuǎn),文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08
JavaScript實(shí)現(xiàn)拖拽和縮放效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)拖拽和縮放效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08

