javascript 节点获取坐标(相对于屏幕\页面\...)
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 节点获取坐标(相对于屏幕\页面\...)相关的知识，希望对你有一定的参考价值。
<div id="test">测试</div>
请问如何获取div相对于屏幕的坐标,相对页面的坐标,等各种坐标
谢谢各位大哥大姐了
能说清楚点吗？
页面的坐标既然可以取得，能写点代码吗？
还有如何设置一个节点的页面坐标
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
html精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop
有资料可以查看。。。
参考资料：http://hi.baidu.com/xiongshihu/blog/item/5bcc607b56e153ff0bd1872a.html
参考技术A 相对于屏幕的坐标没办法取页面的坐标可以获取offsetTop然后一直加offsetParent的offsetTop
你最好使用jquery这种类库来处理，他已经屏蔽了浏览器兼容性问题
补充：
元素的页面坐标就是直接访问属性，难道这个代码也要写出来么？
你还使用jquery吧，容易使用的多，而且可以直接设置相对于父对象的坐标位置
如何获取div相对于屏幕的坐标？
参考技术A <!DOCTYPE html> 2<html lang="en"> 3
<head>
<meta charset="UTF-8">
<title>获取div相对屏幕于左上角的绝对位置</title>
</head> 7 <body>
<div class="div1"></div> 9 <script>10 //返回值是一个包含width height top right bottom left的对象11 var rect = document.querySelector('.div1').getBoundingClientRect()12 console.log(rect);13 </script>14 </body>15 </html>
以上是关于javascript 节点获取坐标(相对于屏幕\页面\...)的主要内容，如果未能解决你的问题，请参考以下文章
javascript 代码技巧 —— javascript获取坐标/滚动/宽高/距离