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>
  • 相关阅读:
    C# 不用添加WebService引用,调用WebService方法
    贪心 & 动态规划
    trie树 讲解 (转载)
    poj 2151 Check the difficulty of problems (检查问题的难度)
    poj 2513 Colored Sticks 彩色棒
    poj1442 Black Box 栈和优先队列
    啦啦啦
    poj 1265 Area(pick定理)
    poj 2418 Hardwood Species (trie树)
    poj 1836 Alignment 排队
  • 原文地址:https://www.cnblogs.com/limeiky/p/6179964.html
Copyright © 2011-2022 走看看