用js——如何获取元素的位置?

zhezhongyun 2025-04-26 22:37 21 浏览

在做前端项目时，切图的时候，由于边边距距特别多，需要计算有相当麻烦，但我们又不要那么弄清每个元素的位置。这时候，我们可以获取某个元素在页面的位置，去比较精准的调整此元素位置。

在用js获取元素的位置之前，我的明白，元素在页面的位置的计算公式，如下：

元素在页面的位置=此元素相对浏览器视窗的位置+浏览器滚动条的值

首先用getBoundingClientRect()方法来获得某个元素相对浏览器视窗的位置｛这个方法返回的是一个对象，即Object，该对象具有4个属性：top，left，right，bottom ｝。我们直接用一个代码事例来说明怎么用，如下：

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
</head>
<body style="width:2000px; height:1000px;">
<div id="demo" style="position:absolute; left:518px; right:100px; width:500px; height:500px;
background:#CC0000; top: 114px;">Demo为了方便就直接用绝对定位的元素</div>
</body>
</html>
<script>
document.getElementById('demo').onclick=function (){
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)
}
}
</script>

HTML script charset 属性

上一篇：基于PyQt5和MathJax的LaTeX公式编辑器
下一篇：css -三角形-箭头

用js——如何获取元素的位置?

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

接口测试遇到500报错?别慌，你的头部可能有点问题

Web前端需要学什么?Web前端开发需要学习哪些?

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?