getBoundingClientRect() 来获取页面元素的位置

最新推荐文章于 2024-06-02 21:27:33 发布

diepaoqiang8835

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量137

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/honeyHHX/p/3697050.html

版权

一、样式：

<style>
body,div{ margin:0; padding:0}
.div-info{ width:200px; height:200px;border:1px solid #ccc; background:#f2f2f2; font:normal 12px/22px SimSun; position:absolute;top:200px; left:200px}
</style>

二、js

<script type="text/javascript">
function divPos(){
var obj = document.getElementById('demo');
alert("left:"+obj.getBoundingClientRect().left)
alert("top:"+obj.getBoundingClientRect().top)
alert("right:"+obj.getBoundingClientRect().right)
alert("bottom:"+obj.getBoundingClientRect().bottom)
var X= obj.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y = obj.getBoundingClientRect().top+document.documentElement.scrollTop;
alert("Demo的位置是X:"+X+";Y:"+Y)
}
</script>

三、html

<body style="width:100%; height:100%;">
      <div id="demo"  class="div-info" οnclick="divPos()">div在浏览器窗口中的位置是，居上200px,居左200px。</div>
</body>

四、图示（top/left/right/bottom具体指示）

转载于:https://www.cnblogs.com/honeyHHX/p/3697050.html

优惠劵

diepaoqiang8835

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
getBoundingClientRect() 来获取页面元素的位置

一、样式：<style>body,div{ margin:0; padding:0}.div-info{ width:200px; height:200px;border:1px solid #ccc; background:#f2f2f2; font:normal 12px/22px SimSun; position:absolute;top:200px; ...
复制链接

扫一扫