zoukankan      html  css  js  c++  java
  • getBoundingClientRect() 来获取页面元素的位置

    document.documentElement.getBoundingClientRect

    方法获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。也不好理解,下面用图说明下。

    该方法已经不再是IE Only了,FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。

    下面的代码举了个简单的例子,可以滚动滚动条之后点红色区域看各个值的变化。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Demo</title>
    </head>
    
    <body style="2000px; height:1000px;">
        <div id="demo" style="position:absolute; left:518px; right:100px; 500px; height:500px; background:#CC0000; top: 114px;">Demo为了方便就直接用绝对定位的元素</div>
    </body>
    </html>
    <script>
    document.getElementById('demo').onclick=function (){
            if (document.documentElement.getBoundingClientRect) { 
                alert("left:"+this.getBoundingClientRect().left)
                alert("top:"+this.getBoundingClientRect().top)
                alert("right:"+this.getBoundingClientRect().right)
                alert("bottom:"+this.getBoundingClientRect().bottom)
                var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
                var Y = this.getBoundingClientRect().top+document.documentElement.scrollTop;
                alert("Demo的位置是X:"+X+";Y:"+Y)
            } 
    }
    </script>
    

  • 相关阅读:
    JVM 类加载过程
    JVM调优总结 -Xms
    JVM 内存模型
    git克隆远程项目并创建本地对应分支
    内存泄漏 和 内存溢出
    weblogic 乱码
    tomcat 、NIO、netty 本质
    Anything is possible if you have got enough nerve.
    maven build 的时候,卡死在Downloading metadata的解决方法
    TimeUnit
  • 原文地址:https://www.cnblogs.com/mofish/p/2054575.html
Copyright © 2011-2022 走看看