如何比較javascript中兩個元素的位置

自本週開始，我一直在嘗試做這項工作，但無法弄清楚。我在我的HTML文件中有兩個元素。它們位於同一條垂直通道上，每按一下按鈕，元素1就會向左移動60ems。我必須比較這兩個元素的位置，並檢測element1是否通過if/else語句傳遞了element2。當它通過時，我想將element1移動到其初始位置並重新開始。但是如果陳述從不發射，它總是跳轉到其他陳述。如何比較javascript中兩個元素的位置

我已經嘗試了比較以下屬性：

$('#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是內部element2的：

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

來源

2012-05-05 Engin Yapici

使用alert或console.log轉儲出position1/position2的值。可能你會得到一個字符串值，比如'10px'，而不是int。如果是這樣，那麼在進行比較之前，您需要parseInt（）這些值。 –

我試圖解析它們，但沒有運氣：/ –

這會給你的當前位置一個元素：

$('#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'); 
    }

來源

2012-05-05 05:11:32 Bill

我也試過這些，我不能使用.position（）。top，因爲它們一直處於相同的y位置。 .position（）。left沒有幫助，它仍然跳轉到else語句 –

嘗試.offset（）。left。如果這兩者都不起作用，那麼你的代碼還有其他問題。沒有其中一個指示變化的元素不能改變位置。你需要打開你的調試器來看看發生了什麼（或者創建一個顯示問題的jsfiddle，我們可以幫助你）。 – Bill

當我使用.offset（）。左鍵甚至不起作用時，element1根本不移動。我會更詳細地檢查我的代碼。謝謝。 –

如何比較javascript中兩個元素的位置

回答

相關問題