jacascript 判断元素尺寸和位置
2017-5-19 liuweibo JavaScript
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 ；
getClientRects()
getClientRects() 方法与 getBoundingClientRect() 不同，该方法是一个返回元素的数个矩形区域的类数组对象。每个类数组对象的参数与 getBoundingClientRect() 方法相同，每个类数组对象都有bottom、height、left、right、top和width六个属性，表示它们相对于视口的四个坐标，以及本身的高度和宽度；
如果应用于块级元素，则 getClientRects()[0].attr 和 getBoundingClientRect().attr 的属性返回相同的值；