jacascript 判断元素尺寸和位置

前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!

getBoundingClientRect()

判断一个元素的尺寸和位置是简单的方法就是使用 obj.getBoundingClientRect();

obj.getBoundingClientRect() 方法返回一个对象,该对象提供当前元素节点的大小、它相对于视口(viewport)的位置等信息;

但是,各个浏览器返回的对象包含的属性不相同:

  • firefox : top left right bottom width height x y(其中,x=left,y=top)
  • chrome/safari/IE9及以上 : top left right bottom width height
  • IE8及以下 : top left right bottom

该方法返回的宽高是偏移宽高 offsetWidth、offsetHeight ;

Element.getBoundingClientRect().height = border + padding + height ;

Element.getBoundingClientRect().width = border + padding + width ;

top: 元素顶部相对于视口的纵坐标;

left: 元素左边界相对于视口的横坐标;

right: 元素右边界相对于视口的横坐标; right = left + width ;

bottom: 元素底部相对于视口的纵坐标; bottom = top + height ;

<style type="text/css">
            *{padding: 0;margin: 0;}
            #test{
                width: 100px;
                height: 100px;
                padding: 10px;
                line-height: 200px;
                border:1px solid black;
                overflow:scroll;
            }
        </style>
        
        <div id="test">内容</div>    
        
        <script>
            var oTest = document.getElementById('test');
            //chrome/safari: 220(10+200+10)
            //firefox/IE: 210(10+200)
            console.log(oTest.scrollHeight);//220
            //103(100+10+10-17)
            console.log(oTest.clientHeight);//103
            //122(100+10+10+1+1)
            
            //该方法返回的宽高是偏移宽高 offsetWidth、offsetHeight ;
            console.log(oTest.offsetHeight);//122
            //122(100+10+10+1+1)
            console.log(oTest.getBoundingClientRect().height);//122
        </script>

getClientRects()

getClientRects() 方法与 getBoundingClientRect() 不同,该方法是一个返回元素的数个矩形区域的类数组对象。每个类数组对象的参数与 getBoundingClientRect() 方法相同,每个类数组对象都有bottom、height、left、right、top和width六个属性,表示它们相对于视口的四个坐标,以及本身的高度和宽度;   

如果应用于块级元素,则 getClientRects()[0].attr 和 getBoundingClientRect().attr 的属性返回相同的值;

<style type="text/css">
            *{padding: 0;margin: 0;}
            #test{
                width: 100px;
                height: 100px;
                padding: 10px;
                line-height: 200px;
                border:1px solid black;
                overflow:scroll;
            }
        </style>
        
        <div id="test">内容</div>    
        
        <script type="text/javascript">
            var oTest = document.getElementById('test');
            console.log(oTest.getClientRects()[0].height);//122
            console.log(oTest.getBoundingClientRect().height);//122
        </script>

实际上,该方法主要用于内联元素,内联元素有多少行,该方法返回的对象有多少个成员。这个方法主要用于判断行内元素是否换行;

<div class="wrapper">
            
                hello world
                hello world
                hello world
            
        </div>
        <script type="text/javascript">
            var oTest = document.getElementById('test');
            console.log(oTest.getClientRects().length);//3
        </script>

getBoundingClientRect(x,y)

有时我们想判定在视口中的指定位置上有什么元素。这可以用 document.elementFromPoint(x,y) 方法来判定。传递 X 和 Y 坐标(相对于视口),该方法选择在指定坐标的最上层和最里层的 Element 对象。如果指定的点在视口以外,elementFromPoint() 返回 null;

最上层是指 z-index 最大的元素;最里层是指最里层的子元素;

这个方法可以用来检测元素是否发生重叠或是碰撞;

<style type="text/css">
            *{padding: 0;margin: 0;}
        </style>
        
        <div class="test" style="width: 100px;height: 100px;">
            <span id="span">hello world
        </div>
        
        <script type="text/javascript">
            var oTest = document.getElementById('test');
            console.log(document.elementFromPoint(10,10).id);//3
        </script>

相关推荐