Element.getBoundingClientRect()

172 阅读 0 评论 114 点赞

我是靠谱客的博主精明冬天，这篇文章主要介绍Element.getBoundingClientRect()，现在分享给大家，希望可以做个参考。

Element.getBoundingClientRect()

理解: getBoundingClientRect() 用于获取某个元素相对于视窗的位置集合.

该Element.getBoundingClientRect()方法返回一个Object对象，该对象有6个属性: top, bottom, left, right, width, height;
这里的top left和css中的理解很相似，width height是元素自身的宽高，但right bottom和css中的理解有点不一样. right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离.

句法:

domRect = element.getBoundingClientRect();

在这里插入图片描述

复制代码

1
2
3
4
5
6
7
8
9
10
 if (document.documentElement.getBoundingClientRect) { 
 	alert("left:"+this.getBoundingClientRect().left);
    alert("top:"+this.getBoundingClientRect().top)
    alert("right:"+this.getBoundingClientRect().right)
    alert("bottom:"+this.getBoundingClientRect().bottom)
    var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
 	var Y = this.getBoundingClientRect().top+document.documentElement.scrollTop;
   	alert("Demo的位置是X:"+X+";Y:"+Y)
 }