getBoundingClientRect()获取元素相对浏览器视窗的坐标值

最新推荐文章于 2024-02-12 17:41:02 发布

dayanwu2842

最新推荐文章于 2024-02-12 17:41:02 发布

阅读量104

点赞数

原文链接：http://www.cnblogs.com/stephenykk/archive/2013/04/04/2999253.html

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        body{height:1000px; margin:0; padding:0; border:5px solid green; background:#999;}
        #tdiv{position:absolute; top:100px; left:300px; background:#eee; width:500px; height:300px;}
    </style>
    <script>
    function $(id){return document.getElementById(id);}
    window.onload=init;
    function init(){
        $('tdiv').onclick=function(){
            if(document.documentElement.getBoundingClientRect){ //若浏览器支持 getBoundingClientRect方法
                alert('元素左边到浏览器视窗左上角的距离left:'+this.getBoundingClientRect().left+'\n'+'元素右边到浏览器视窗左上角的距离right:'+this.getBoundingClientRect().right+'\n 元素上边到浏览器视窗左上角的距离top:'+this.getBoundingClientRect().top+'\n 元素下边到浏览器视窗左上角的距离bottom:'+this.getBoundingClientRect().bottom)
                //getBoundingClientRect() 获得元素相对于浏览器窗口以左上角为原点的坐标系统的 坐标值
                // 当文档内容向左滚动或向右滚动时 相对坐标值可能会为负数
            }
        }

    }
    </script>
</head>
<body>
    <div id="tdiv">i am a div tag <br />top:100px; left:300px; background:#eee; width:500px; height:300px;</div>
</body>
</html>

转载于:https://www.cnblogs.com/stephenykk/archive/2013/04/04/2999253.html

dayanwu2842

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
getBoundingClientRect()获取元素相对浏览器视窗的坐标值

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <style> body{height:1000px; margin:0; padding:0; border:5px solid green; background:#99...
复制链接

扫一扫