2015-09-20 74 views
4

考慮下面的HTML:找出兩個元素的起始點之間有多少個像素?

<div id="members" class="main">  
    <section class="top"> 
     <!-- Other Content --> 
    </section> 
    <section class="listing"> 
     <div class="holder container"> 
      <div class="row"> 
       <div class="members-main col-sm-12"> 
        <div class="members-head row"> 

        </div> 
       </div> 
      </div> 
     </div> 
    </section> 
</div> 

是否有JavaScriptjQuery的方式,我可以找出像素的開始#members元素開始.members-head元素之間的金額是多少?

+0

如果你想獲得一個確切的*** ***你必須求索用戶所使用的縮放級別的像素數。看看[這裏](http://blog.sebastian-martens.de/2009/12/how-to-detect-the-browser-zoom-level-change-browser-zoo/)瞭解一些細節。 – Amit

+0

@Amit謝謝你! – Brett

回答

1

嘗試

$('.members-head').offset().top - $('#members').offset().top 

Jquery offset

如果你有內部#members一個多.members-head元素(我懷疑),你可以嘗試$('.members-head:first'),或循環通過他們與.each$(this).offset().top - $('#members').offset().top

+0

難道不是相反嗎? $('。members-head')。offset()。top - $('#members')。offset()。top'? – Brett

+0

是的,可以肯定你可以做abs(foo)。我改變了我的答案。 –

+0

謝謝。雖然縮放的確會影響到結果,但對我來說並不重要,因爲它不一定非常完美。 – Brett

1

試試這個 你會得到。

$('#members').offset().top - $('.members-head').offset().top 
2

offset().top給你最高的位置元素的重刑。

var distance = $('.members-head').offset().top - $('#members').offset().top; 
 

 
alert("Distance is : " + distance)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="members" class="main">  
 
    <section class="top"> 
 
     Other Content 
 
    </section> 
 
    <section class="listing"> 
 
     <div class="holder container"> 
 
      <div class="row"> 
 
       <div class="members-main col-sm-12"> 
 
        <div class="members-head row"> 
 
         fdgfdgfdgdfgdfs 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </section> 
 
</div>

+0

這並沒有真正回答這個問題。在IE瀏覽器(我懷疑在其他瀏覽器中),我得到一小部分(18.3999 ...),更糟糕的是,如果我放大,我會得到相同的結果。這不是像素,絕對不準確。 – Amit

+0

對於IE,請嘗試[offsettop](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop) –

相關問題