zoukankan      html  css  js  c++  java
  • js中getBoundingClientRect的作用及兼容方案

    js中getBoundingClientRect的作用及兼容方案

    1、getBoundingClientRect的作用

    getBoundingClientRect用于获取某个html元素相对于视窗的位置集合。
     
    执行 object.getBoundingClientRect();会得到元素的top、right、bottom、left、width、height属性,这些属性以一个对象的方式返回。
     

    2.getBoundingClientRect上下左右属性值解释

    主要是left和bottom要解释一下,left是指右边到页面最左边的距离,bottom是指底边到页面顶边的距离。
     
    看图:
    js中getBoundingClientRect的作用及兼容方案
     

    3. 浏览器兼容性

    ie5以上都能支持,但是又一点点地方需要修正一下,
    IE67的left、top会少2px,并且没有width、height属性。
     

    4、利用getBoundingClientRect来写一个获取html元素相对于视窗的位置集合的方法

    <div id="test" style=" 100px; height: 100px; background: #ddd;"></div>
    <script>
        function getObjXy(obj){
            var xy = obj.getBoundingClientRect();
            var top = xy.top-document.documentElement.clientTop+document.documentElement.scrollTop,//document.documentElement.clientTop 在IE67中始终为2,其他高级点的浏览器为0
                bottom = xy.bottom,
                left = xy.left-document.documentElement.clientLeft+document.documentElement.scrollLeft,//document.documentElement.clientLeft 在IE67中始终为2,其他高级点的浏览器为0
                right = xy.right,
                width = xy.width||right - left, //IE67不存在width 使用right - left获得
                height = xy.height||bottom - top;
    
            return {
                top:top,
                right:right,
                bottom:bottom,
                left:left,
                width,
                height:height
            }
        }
    
        var test = getObjXy(document.getElementById('test'));
        alert("top:" + test.top + ", right:" + test.right + ", bottom:" + test.bottom + ", left:" + test.left);
    </script>
  • 相关阅读:
    ABAP ole方式对EXCEL进行操作
    ABAP 通过视图取数到内表函数
    ABAP 数值类型转换
    ABAP 供应商、工厂对应公里数维护
    deb包转换为rpm包格式
    Linux统计即时网速
    RedHat可用的几处软件源
    linux 技巧:使用 screen 管理你的远程会话
    国内常用Linux镜像站点
    telnet访问出现telnet:Unable to connect to remote host: No route to host
  • 原文地址:https://www.cnblogs.com/limeiky/p/6179964.html
Copyright © 2011-2022 走看看