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>