getBoundingClientRect()方法总结

getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。

getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。

该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height;

这里的top、left和css中的理解很相似,width、height是元素自身的宽高,但是right,bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最上面的距离。

应用一:判断某个元素滚动到可视区域时加载等特效

比如,onscroll事件中增加:当下面的不可见的元素,滚动到浏览器可视区域时,淡入淡出,或加载某些东西

应用二:有了这个方法,获取页面元素的位置就简单多了

蜀ICP备17004271号
copyright © 2018 microsky 版权所有