如何在javascript中比较两个元素的位置

How to compare positions of two elements in javascript

本文关键字：两个 元素 位置 javascript 比较      更新时间：2023-09-26

从本周初开始，我一直在努力完成这项工作，但无法弄清楚。我的 HTML 文件中有两个元素。它们位于相同的垂直车道上，element1 每单击一次按钮就会向左水平移动 60ems。我必须比较这两个元素的位置，并检测元素 1 是否使用 if/else 语句传递了元素 2。当它通过时，我想将 element1 移动到其初始位置并重新开始。但是，如果语句从不射击，它总是跳转到 else 语句。

我尝试比较以下属性： 

$('#elemet1').position();
$('#elemet1').position().left;
$('#elemet1').offset();
$('#elemet1').offsetLeft;
$('#elemet1').css("position");
$('#elemet1').css("left");
$('#elemet1').css("margin");
$('#elemet1').left;

我试图比较如下位置： 

$(function () {
      $("button").click(function () {
          var position1 = $('#element1').css("left");
          var position2 = $('#element2').css("left");
          if (position1 <= position2) {
              $("#element1").animate({left:'+=240em'}, 600);
          }
          else {
              $("#element1").animate({left:'-=60em'}, 600);
          }
      });
  });

如果您能给我一个答案或将我引导到另一篇文章，我将不胜感激。提前谢谢你。

编辑：我使用的样式如下：

.element2 {
    position: relative;
    width: 60em;
    height: 40em;
    bottom: 8em;
    background: rgba(242, 210, 139, 0.6);
    border-radius: 1.2em;
    z-index: 1;
    overflow: hidden;
#element1 {
    position: absolute;
    margin-left: 180em;
    width: 60em;
    height: 40em;
    z-index: 1;
}

我应该在开头提到这一点：元素 1 在元素 2 中：

 <div class="element2">
      <img id="element1" src="image/bg1.png" />
 </div>

这将为您提供元素的当前位置：

$('#element').position().left;

如果您需要相对于文档的位置（而不是相对于父元素的位置），您可以使用：

$('#element').offset().left;

您应该能够直接比较不同元素的返回值。这里有一些对我有用的示例代码，请注意，没有必要解析，因为它们总是返回像素值。

  var pos = Math.max($(w).scrollTop(), 38),
      top = $(ballon).position().top,
      dist = Math.abs(pos-top),
      time = dist > 1000 ? 2000 : dist / 0.15;
  if (pos + $(w).height() >= pHeight) {
    pos = pHeight - bHeight - gHeight;
    $(ballon).animate({'top': pos}, time, 'easeInOutSine');
  }
  else if (dist > 150 || pos < 100) {
    $(ballon).animate({'top': pos}, time, 'easeInOutBack');
  }
相关文章：