RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 759867
Accepted
nick_n_a
nick_n_a
Asked:2020-12-18 16:28:07 +0000 UTC2020-12-18 16:28:07 +0000 UTC 2020-12-18 16:28:07 +0000 UTC

如何计算html元素的坐标

  • 772

如何计算(获取)一个 html 元素的位置。offsetTop并offsetLeft给出一个相对值(并不总是来自[x=0,y=0]原点的报告)。谷歌给出了一个“未完成”的版本http://javascript.ru/ui/offset。

不是“如何在滚动过程中动态确定元素相对于其父元素的当前位置”,而是如何获取相对于页面内容左上角的绝对坐标。

第二个问题又是“确定一个元素相对于其父元素的当前位置”,相对于页面内容左上角的绝对坐标。

有必要将元素“悬挂”到当前布局(以便在某个元素上/附近显示提示、消息、广告等),如下所示:

      document.getElementById("act_holder").style.position= "absolute";
      document.getElementById("act_holder").style.display = "block";
      document.getElementById("act_holder").style.top = 
          (getOffset(document.getElementById("act_hlp")).top - 75 ) + "px";    
      document.getElementById("act_holder").innerHTML = "элемент занят"; 

使用时absolute,需要相对于左上角的坐标。

javascript
  • 3 3 个回答
  • 10 Views

3 个回答

  • Voted
  1. Best Answer
    nick_n_a
    2020-12-18T16:31:47Z2020-12-18T16:31:47Z

    这是从 javascript.ru 收集到堆的代码。

    function getOffset(elem) {
            if (elem.getBoundingClientRect) {
            var box = elem.getBoundingClientRect();
            var body = document.body;
            var docElem = document.documentElement;
            var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
            var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
            var clientTop = docElem.clientTop || body.clientTop || 0;
            var clientLeft = docElem.clientLeft || body.clientLeft || 0;
            return { top: Math.round(box.top +  scrollTop - clientTop), left: Math.round(box.left + scrollLeft - clientLeft) }      
            } else {
                 var top=0, left=0
            while(elem) {
                top = top + parseFloat(elem.offsetTop);
                left = left + parseFloat(elem.offsetLeft);
                elem = elem.offsetParent ;
               }
               return {top: top, left: left};
               }
        }
    

    几点评论:getBoundingClientRect函数引起争议,mozilla引用

    getBoundingClientRect 的返回值是一个 TextRectangle 对象,其中包含用于描述具有像素尺寸边框的框的只读属性 left、top、right 和 bottom。top 和 left 的值是相对于视口的左上角的。

    那些。已经考虑到文档的滚动和缩进,如果您需要相对于工作表坐标系原点(文档的左上角)的坐标,则必须减去它们。getBoundingClientRect 如果满足两个条件,此函数将给出正确的结果:1)滚动位置为零(通常发生在开头),2)如果文档(正文)缩进未设置或设置为零。由于并不总是满足这些条件,因此必须使用更复杂的解决方案。

    我自己补充一下,如果使用报表系统,position=fixed它getBoundingClientRect会给出适合这个报表系统的坐标,但是固定很少使用,因为当滚动位置发生变化时,屏幕上的位置会被保存并且元素会“漂浮”。对于绝对和静态,您将不得不重新计算坐标。相对系统只是相对坐标,在某些情况下可以使用。

    • 4
  2. Air
    2020-12-19T20:43:42Z2020-12-19T20:43:42Z

    点击任意元素获取数据说明你还想获取什么绝对坐标???很可能我会明白......全屏观看更好

    var wrapper = document.getElementById('wrapper');
    var infomBlock = document.getElementById('infomBlock');
    var blocks = document.getElementsByClassName('blocks');
    
    function getСoordinates(elem) {
      return coord = [
        'это абсолютное значени нижней границы элемента от окна просмотра - bottom ' + elem.getBoundingClientRect().bottom,
        '<br/>это абсолютное значени верхней  границы элемента от окна просмотра - top ' + elem.getBoundingClientRect().top,
        '<br/> это абсолютное значени левой границы элемента от окна просмотра - left ' + elem.getBoundingClientRect().left,
        '<br/>right это абсолютное значени правой границы элемента от окна просмотра - ' + elem.getBoundingClientRect().right,
        '<br/>height - это абсолютное значени высоты элемента ' + elem.getBoundingClientRect().height,
        '<br/>width - это абсолютное значени ширины элемента ' + elem.getBoundingClientRect().width,
        '<br/>x - это абсолютное значени верхнего левого угла элемента по координате х' + elem.getBoundingClientRect().x,
        '<br/>y - это абсолютное значени верхнего левого угла элемента по координате y ' + elem.getBoundingClientRect().y,
      ];
    
      console.log(...coord)
    
    }
    
    for (var i = 0; i < blocks.length; i++) {
      blocks[i].addEventListener('click', function() {
        getСoordinates(this);
        infomBlock.innerHTML = coord;
      })
    }
    * {
      margin: 0;
      padding: 0;
    }
    
    html,
    body {
      width: 100%;
      height: 100%;
      background: #272727;
    }
    
    #wrapper {
      color: white;
      width: 100%;
      height: 100%;
    }
    
    #infomBlock.blocks {
      display: block;
      margin: 0;
      background: rgba(200, 200, 200, .5);
      width: 100%;
      height: 200px;
      color: white;
    }
    
    .blocks {
      cursor: pointer;
      display: inline-block;
      margin: 50px 20px;
      color: white;
      width: 150px;
      height: 150px;
      background: orange;
    }
    
    .blocks:nth-child(even) {
      margin: 150px 10px;
    }
    <div id="wrapper">
      <div id="infomBlock" class="blocks"></div>
      <div class="blocks"></div>
      <div class="blocks"></div>
      <div class="blocks"></div>
      <div class="blocks"></div>
      <div class="blocks"></div>
      <div class="blocks"></div>
      <div class="blocks"></div>
    </div>

    • 1
  3. Гончаров Александр
    2020-12-19T21:13:00Z2020-12-19T21:13:00Z

    如果使用 jQuery,那么一切都很简单:

    $('#element').offset();//вернёт координаты в формате {top: float, left: float}
    

    将始终有效,除了固定元素。这是文档边缘的位置 - 页面内的位置。

    • 1

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    Python 3.6 - 安装 MySQL (Windows)

    • 1 个回答
  • Marko Smith

    C++ 编写程序“计算单个岛屿”。填充一个二维数组 12x12 0 和 1

    • 2 个回答
  • Marko Smith

    返回指针的函数

    • 1 个回答
  • Marko Smith

    我使用 django 管理面板添加图像,但它没有显示

    • 1 个回答
  • Marko Smith

    这些条目是什么意思,它们的完整等效项是什么样的

    • 2 个回答
  • Marko Smith

    浏览器仍然缓存文件数据

    • 1 个回答
  • Marko Smith

    在 Excel VBA 中激活工作表的问题

    • 3 个回答
  • Marko Smith

    为什么内置类型中包含复数而小数不包含?

    • 2 个回答
  • Marko Smith

    获得唯一途径

    • 3 个回答
  • Marko Smith

    告诉我一个像幻灯片一样创建滚动的库

    • 1 个回答
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Алексей Шиманский 如何以及通过什么方式来查找 Javascript 代码中的错误? 2020-08-03 00:21:37 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    user207618 Codegolf——组合选择算法的实现 2020-10-23 18:46:29 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5