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 的属性返回相同的值;


网站备案号:京ICP备11043289号-1 北京市公安局网络备案 海1101084571
版权所有 北京育灵童科技发展有限公司 Copyright © 2002-2017 www.elight.cn, All Rights Reserved