找出两个元素的起始点之间有多少像素

Find out how many pixels between the start of two elements?

本文关键字：之间 像素 多少 元素 两个      更新时间：2023-09-26

考虑以下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>

是否有一种方法在JavaScript或jQuery中，我可以找出#members元素的开始和.members-head元素的开始之间的像素量?

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>

Try

$('.members-head').offset().top - $('#members').offset().top
Jquery抵消

如果您在#members中有多个.members-head元素(正如我怀疑的那样)，您可以尝试$('.members-head:first')，或者使用.each循环它们并执行$(this).offset().top - $('#members').offset().top

试试这个你会得到。

$('#members').offset().top - $('.members-head').offset().top
相关文章：