主页 / 问题 / 759867
Accepted
nick_n_a
Asked:2020-12-18 16:28:07 +0800 CST2020-12-18 16:28:07 +0800 CST

如何计算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 个回答

  1. Best Answer

    这是从 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. 点击任意元素获取数据说明你还想获取什么绝对坐标？？？很可能我会明白......全屏观看更好

    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. 如果使用 jQuery，那么一切都很简单：

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

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

    • 1

相关问题