Element.getBoundingClientRect()

Posted 2021-06-21 ZZZ --- jh

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();

 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)
 }