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


    一、样式:

    <style>
    body,div{ margin:0; padding:0}
    .div-info{ 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="100%; height:100%;">
          <div id="demo"  class="div-info" onclick="divPos()">div在浏览器窗口中的位置是,居上200px,居左200px。</div>
    </body>
    

     四、图示(top/left/right/bottom具体指示)

  • 相关阅读:
    第七章
    第五章
    第六章
    Git使用入门
    源代码的下载和编译
    向中国最牛的前端群-鬼群致敬
    Normalize.css做了哪些事情--看代码
    谷歌浏览器:书签被误删了怎么办
    2013/8月读书计划
    Limu:JavaScript的那些书
  • 原文地址:https://www.cnblogs.com/honeyHHX/p/3697050.html
Copyright © 2020-2023  润新知