谷歌浏览器控制台获取元素坐标方法实例

最新推荐文章于 2025-06-21 17:45:11 发布

jlzw2018

最新推荐文章于 2025-06-21 17:45:11 发布

阅读量1.1w

点赞数 4

CC 4.0 BY-SA版权

文章标签：元坐标

本文链接：https://blog.youkuaiyun.com/jlzw2018/article/details/84558290

本文介绍了如何在谷歌浏览器控制台中获取HTML元素的坐标。通过实例展示了使用getBoundingClientRect方法，结合document.documentElement来计算元素相对于浏览器窗口的位置，并提供了一个兼容IE的函数getRect()。以查找'Bing'网站上'id'为'est_cn'的'国内版'标签为例，展示了获取其坐标并打印在控制台的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

谷歌浏览器控制台获取元素坐标方法实例

1、以谷歌浏览器为例，找了好多实例但是没有找，琢磨了好几天终于找到答案，再次留下笔记；

2、打开谷歌浏览器，以bing为例，网址：http:cn.bing.com，打开控制台Console，比如我们想查看"国内版"标签在浏览器上面的相对坐标,右键检查“<div id="est_cn" class="est_selected">国内版</div>”，“国内版”标签的id为“est_cn”;

3、那么我们就用以下代码：

function getRect(elements) {
   var rect = elements.getBoundingClientRect();
   w = rect.width || rect.right - rect.left;
   h = rect.height || rect.bottom - rect.top;
   ww = document.documentElement.clientWidth; //浏览器可见宽
   hh = document.documentElement.clientHeight; //浏览器可见高
   return { // 兼容ie多出的两个px
       top: Math.floor(rect.top), // 元素顶边到浏览器底边距离
       bottom: Math.floor(hh - rect.bottom), // 元素底边到浏览器底边距离
       left: Math.floor(rect.left), // 元素左边到浏览器底边距离
   &nb