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)對于使用表格和內(nèi)嵌框架布局的頁面,由于不同瀏覽器實現(xiàn)元素方式的差異,得到的結果就不精確了。
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)作為起點坐標,所以要將值減去起點坐標,其他瀏覽器都是已(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()方法。
以上所述就是本文的全部內(nèi)容了,希望能夠對大家學習javascript有是幫助。
- javascript innerHTML、outerHTML、innerText、outerText的區(qū)別
- javascript innerText和innerHtml應用
- JavaScript中innerHTML,innerText,outerHTML的用法及區(qū)別
- javascript中innerText和innerHTML屬性用法實例分析
- js中innerText/textContent和innerHTML與target和currentTarget的區(qū)別
- JavaScript動態(tài)改變HTML頁面元素例如添加或刪除
- 快速解決js動態(tài)改變dom元素屬性后頁面及時渲染的問題
- 離開頁面時檢測表單元素是否被修改,提示保存的js代碼
- JavaScript獲取頁面上某個元素的代碼
- js使用文檔就緒函數(shù)動態(tài)改變頁面內(nèi)容示例【innerHTML、innerText】

