首页 > 其他分享 >如何获取页面上某个元素的坐标

如何获取页面上某个元素的坐标

时间:2023-06-27 13:34:21浏览次数:33  
标签:node codeImg top 元素 current 坐标 某个 页面 left

打开浏览器的F12控制台,在console内输入下面代码

function getPosition(node) {
//获取元素相对于其父元素的left值var left
var left = node.offsetLeft;
var top = node.offsetTop;
// 取得元素的offsetParent
current = node.offsetParent;

// 一直循环直到根元素
while(current != null) {
left += current.offsetLeft;
top += current.offsetTop;
current = current.offsetParent;
}
return {
"left": left,
"top": top
}
};
getPosition(document.querySelector('.codeImg'));

替换getPosition(document.querySelector('.codeImg'));中的codeImg为想要获取坐标内容的class值,回车即可获得对应坐标

  1. left:
  2. top:

标签:node,codeImg,top,元素,current,坐标,某个,页面,left
From: https://www.cnblogs.com/tom-he-jerry/p/17508597.html

相关文章

  • windows 杀掉某个端口的进程
    1、使用命令行工具,根据端口号查找对应进程netstat-ano|findstr:端口号 2、找到该端口所对应的进程ID(PID),并输入以下命令:taskkill/f/pid进程ID 即可将此端口的进程消灭......
  • Java求和元素_实现一个List集合中的某个元素的求和
    Listuserlist=userService.findAll();Integersum=userlist.stream().collect(Collectors.summingInt(User::getAge));packagecom.example.list_test;importjava.util.ArrayList;importjava.util.List;/***描述:ListTest3**@author何志鹏*@ClassName......
  • Vue如何在页面加载时将url的参数赋值给组件
    <template> <inputv-model="loginForm.username" name="username" type="text" tabindex="1" auto-complete="on" /><inputv-model="loginForm.password":type="passwordType"......
  • 前端Vue自定义加载中loading加载结束end组件 可用于分页展示 页面加载请求
    前端Vue自定义加载中loading加载结束end组件可用于分页展示页面加载请求,请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13219效果图如下:实现代码如下:cc-paging使用方法<!--加载中用法isLoading:是否加载isEnd:是否结束加载--><cc-paging:isLoad......
  • HTML Over the wire 框架和单页面应用的区别
    HTMLOverthewire方法包括类似于多页面应用程序(MPA)的服务器端渲染(SSR)。然而,在初始请求之后,浏览器仅通过AJAX异步检索HTML片段,因此整个页面不再重新渲染。与单页应用程序(SPA)不同,服务器还处理应用程序的逻辑和状态:[图片]单页面应用(SinglePageApplication,简......
  • fastadmin 根据某个字段的值控制另一个字段显示与隐藏
    {field:'switch',title:__('Switch'),table:table,//formatter:Table.api.formatter.toggle......
  • 08异步短信发送,注册功能,补充【1.为什么要写media才能访问,2.debug作用,3.ALLOWED_HOSTS
    1异步发送短信#原来的发送短信,是同步 -前端输入手机号---》点击发送短信---》前端发送ajax请求----》到咱们后端接口---》取出手机号----》调用腾讯发送短信---》腾讯去发短信---》发完后----》回复给我们后端发送成功---》我们后端收到发送成功---》给我们前端返回发送成功......
  • JQ 自动加载页面
    demo.html<listyle="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);"><p>---------------</p></li><listyle="opacity:0;-moz-opacity:0;filter:alpha(opacity=0);"><p>阅谁问君诵,水落清香浮</p></li>......
  • JS 跳转对应的手机页面
    location.pathname(location对象的pathname属性)用于设置或取得当前URL的路径部分<scripttype="text/javascript"> varpath=location.pathname; alert(path);</script>效果图: 前提是手机和PC站都同一个数据库,更新的路径都是相同的,只是域名的不同。一个是www,另一个是m......
  • thinkphp或者其他h5页面开启HMR
    在ThinkPHP框架中,HTML文件通常是由PHP渲染的视图文件。要在这样的环境中实现HMR(HotModuleReplacement,热模块替换),你可能需要将前端开发环境(如Webpack或Vite)与ThinkPHP集成。以下是一个基本的步骤:1.首先,你需要在项目中安装Node.js和npm(或yarn),并使用它们来安装W......