获取页面元素的位置

原创

叹之 2021-07-09 11:02:39 ©著作权

©著作权归作者所有：来自51CTO博客作者叹之的原创作品，请联系作者获取转载授权，否则将追究法律责任

获取视口的大小

视口即viewport，指的是浏览器窗口中可显示页面内容的区域，即下图红框中的区域
网页上的每个元素，都有clientHeight和clientWidth属性。这两个属性指元素的内容部分再加上padding的所占据的视觉面积，不包括border和滚动条占用的空间。

根据这一点，我们只需要求出documentElement（即兜底的html元素）的宽高就可以得出视口大小了

　　function getViewport(){
　　　　return {
　　　　　　width: document.documentElement.clientWidth,
　　　　　　height: document.documentElement.clientHeight
　　　　}
　　}

注：为什么documentElement的宽高就是视口大小？因为当body中的内容超出documentElement时，documentElement会出现滚动条，即它的客户区宽高是跟视口一致，不会被子元素撑开

获取网页的大小

网页上的每个元素还有scrollHeight和scrollWidth属性，指包含滚动条在内的该元素的视觉面积。

因此，documentElement的scrollHeight和scrollWidth属性就是网页的大小，意思就是滚动条滚过的所有长度和宽度。

　　function getPagearea(){
　　　　return {
　　　　　　width: document.documentElement.scrollWidth,
　　　　　　height: document.documentElement.scrollHeight
　　　　}
　　}

获取网页元素的绝对位置

网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。这个绝对位置要通过计算才能得到。

每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。所以，只需要将这两个值进行累加，就可以得到该元素的绝对坐标。
获取页面元素的位置_前端_03

	function getElementLeft(element){
	　　　　var actualLeft = element.offsetLeft;
	　　　　var current = element.offsetParent;
	
	　　　　while (current !== null){
	　　　　　　actualLeft += current.offsetLeft;
	　　　　　　current = current.offsetParent;
	　　　　}
	
	　　　　return actualLeft;
	}

　　function getElementTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var current = element.offsetParent;

　　　　while (current !== null){
　　　　　　actualTop += current.offsetTop;
　　　　　　current = current.offsetParent;
　　　　}

　　　　return actualTop;
　　}

获取网页元素的相对位置

网页元素的相对位置，指该元素左上角相对于浏览器窗口左上角的坐标。

有了绝对位置以后，只要将绝对坐标减去页面的滚动条滚动的距离即可
获取页面元素的位置_js_04

　　function getElementViewLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var current = element.offsetParent;

　　　　while (current !== null){
　　　　　　actualLeft += current.offsetLeft;
　　　　　　current = current.offsetParent;
　　　　}

　　　　return actualLeft - document.documentElement.scrollLeft;
　　}

　　function getElementViewTop(element){
　　　　var actualTop = element.offsetTop;
　　　　var current = element.offsetParent;

　　　　while (current !== null){
　　　　　　actualTop += current. offsetTop;
　　　　　　current = current.offsetParent;
　　　　}

　　　　return actualTop - document.documentElement.scrollTop;
　　}

获取元素位置的快速方法

getBoundingClientRect()方法。它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。

所以，网页元素的相对位置就是

　  var X = this.getBoundingClientRect().left;
　　var Y = this.getBoundingClientRect().top;

再加上滚动距离，就可以得到绝对位置

　　var X = this.getBoundingClientRect().left + document.documentElement.scrollLeft;
　　var Y = this.getBoundingClientRect().top + document.documentElement.scrollTop;