原生JS获取元素在文档中的位置

原生JS提供了很多关于元素信息的属性

这里写图片描述

具体就不总结了

元素在页面上的位置有绝对位置和相对位置


绝对位置

网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。这个绝对位置要通过计算才能得到。
首先，每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。所以，只需要将这两个值进行累加，就可以得到该元素的绝对坐标。

但这里要注意一个问题：要考虑offsetParent的border的宽度。

在这里插入图片描述
有上面图可以知道我们需要不断的累加offsetLeft，而且要考虑border存在的情况。另外要注意offsetParent并不一定是父元素，offsetParent指的是有定位属性的的父元素

// 获取元素在页面上的绝对位置
	function getElementPageLeft(element){
		var actualLeft=element.offsetLeft;
		var parent=element.offsetParent;
		while(parent!=null){
			actualLeft+=parent.offsetLeft+parent.clientLeft;
			parent=parent.offsetParent;
		}
		return actualLeft;
	}
	
	function getElementPageTop(element){
		var actualTop=element.offsetTop;
		var parent=element.offsetParent;
		while(parent!=null){
			actualTop+=parent.offsetTop+parent.clientTop;
			parent=parent.offsetParent;
		}
		return actualTop;
	}



相对位置

网页元素的相对位置，指该元素左上角相对于浏览器窗口左上角的坐标。
有了绝对位置以后，获得相对位置就很容易了，只要将绝对坐标减去页面的滚动条滚动的距离就可以了。

//获取元素在页面上的相对于窗口的位置
	function getElementViewLeft(element){
		var actualLeft = getElementPageLeft(element);
		//获取页面滚动距离
		var scrollLeft=document.body.scrollLeft||document.documentElement.scrollLeft
	
		return actualLeft-scrollLeft;

	function getElementViewTop(element){
		var actualTop = getElementPageTop(element);
		var scrollTop=document.body.scrollTop||document.documentElement.scrollTop
		return actualTop-scrollTop;
	}




获取元素的相对位置，JS还提供了一种更简单的方法：Element.getBoundingClientRect()

Element.getBoundingClientRect()返回一个对象，对象包含了元素距离窗口的位置属性：left、right、top、bottom

这里写图片描述
注意：要考虑浏览器是否支持此方法！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    #box1{
      position: relative;
      width: 500px;
      height: 500px;
      background-color: skyblue;
      margin: 100px;
      border: 10px solid #000;
    }
    #box2{
      width: 100px;
      height: 100px;
      background-color: slateblue;
      margin-left: 50px;
    }
  </style>
</head>
<body>
  <div id="box1">
    <div id="box2"></div>
  </div>
  <script>
     function getElementPageLeft(element){
        var actualLeft=element.offsetLeft;
        var parent=element.offsetParent;  //是有定位属性的父元素，如果box没有positon属性，则offsetParent为body，但是也要考虑body的boder
        while(parent!=null){
            actualLeft+=parent.offsetLeft+parent.clientLeft;
            parent=parent.offsetParent;
        }
        return actualLeft;
    }
    const box2 = document.getElementById('box2')
    console.log(getElementPageLeft(box2))
    console.log(box2.getBoundingClientRect().left)
  </script>
</body>
</html>





参考链接：阮一峰的博客

# javascript # css # 前端 # html
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生