js获取元素在页面中的坐标代码实例
本章节分享一段代码实例,它实现了获取一个元素在页面中坐标的功能。
大家要注意是在页面中的坐标而不仅仅是在浏览器客户区的坐标,也就是包括滚动遮盖的部分。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> body{height:1500px;} #show{ width:200px; height:100px; background:#ccc; position:absolute; top:200px; left:100px; } #bt{ position:fixed; top:350px; left:100px; } </style> <script type="text/javascript"> 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 top=box.top+scrollTop, left=box.left+scrollLeft; return { //Math.round 兼容火狐浏览器bug top:Math.round(top), left:Math.round(left) } } window.onload=function(){ var obt=document.getElementById("bt"); var odiv=document.getElementById("show"); obt.onclick=function(){ var obj=getOffsetRect(odiv); odiv.innerHTML=obj.top; } } </script> </head> <body> <div id="show"></div> <input type="button" id="bt" value="查看效果"> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).function getOffsetRect(ele){},参数规定要获取坐标的元素。
(2).var box=ele.getBoundingClientRect(),获取元素在浏览器客户区的坐标。
(3). var body=document.body,获取body元素。
(4).docElem=document.documentElement,获取document元素。
(5).var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop,兼容所有浏览器的获取向上滚动的尺寸。
(6).var top=box.top+scrollTop,获取在页面垂直方向的偏移量,也就是元素在客户区的上偏移量加上页面向上滚动的尺寸。
(7).return {
//Math.round 兼容火狐浏览器bug
top:Math.round(top),
left:Math.round(left)
},返回一个对象,此对象包含偏移量。
二.相关阅读:
(1).pageYOffset可以参阅window.pageYOffset一章节。
(2).docElem.scrollTop||body.scrollTop可以参阅document.documentElement.scrollTop浏览器兼容一章节。
(3).Math.round()可以参阅javascript Math.round()一章节。
(4).getBoundingClientRect()方法可以参阅js getBoundingClientRect()一章节。
(5).innerHTML属性可以参阅js innerHTML一章节。