如何計算兩個元素之間的空間？

Question

如何計算一個元素與下一個渲染元素之間的空間量？

我想知道特定的hr和下面的任何節目之間有多少空間。從視覺上來說，這可能是一個段落或一個標題或一個圖像或其他任何東西，但hr和下一個東西都可以嵌套在其他塊。所以，通過「渲染元素」，我的意思是頁面上下一個可見的東西。

我需要這個的原因是我需要在hr，position: relative之後插入一個元素，並且我不想移除內容，除非我的空間比我的新元素短。如果空間較短，我只想盡可能多地移動內容以避免覆蓋內容。

我根本無法控制HTML的生成。我只能將代碼添加到生成的頁面。

下面是我的工作HTML的例子：

<div class="extra-wrapper"> 
    <p>The line that separates the header from the rest of the page is below this.</p> 
    <hr> 
</div> 
<p class="top-p"> 
    Lorem ipsum dolor... 
</p> 

如果總是這樣，在片段下方可能會奏效，但問題是，我開始與兩個元素並且頁面上可見的下一個元素可能以不可預知的方式嵌套在其他塊中。

我還發現下一個元素可能是兄弟姐妹。所以我需要檢查$hr.next()是否有值，我在下面的代碼片段中沒有這樣做。

$(function() { 
 
    var $header = $('#header'); 
 
    var $hr = $header.siblings('.extra-wrapper').children('hr').filter(':first'); 
 
    var $next_element = $hr.parent().next(); 
 

 
    var extra_wrapper_bottom_margin = parseInt($hr.parent().css('margin-bottom')); 
 
    var extra_wrapper_bottom_padding = parseInt($hr.parent().css('padding-bottom')); 
 

 
    var hr_bottom_margin = parseInt($hr.css('margin-bottom')); 
 
    var hr_bottom_padding = parseInt($hr.css('padding-bottom')); 
 

 
    var next_element_top_margin = parseInt($next_element.css('margin-top')); 
 
    var next_element_top_padding = parseInt($next_element.css('padding-top')); 
 

 
    /* Account for collapsing vertical margins. */ 
 
    var biggest_margin; 
 
    if (extra_wrapper_bottom_margin > hr_bottom_margin) { 
 
    biggest_margin = extra_wrapper_bottom_margin; 
 
    } else { 
 
    biggest_margin = hr_bottom_margin; 
 
    } 
 

 
    if (next_element_top_margin > biggest_margin) { 
 
    biggest_margin = next_element_top_margin; 
 
    } 
 

 
    var space_between = biggest_margin + hr_bottom_padding + extra_wrapper_bottom_padding + next_element_top_padding; 
 

 
    $('#space').val(space_between); 
 
});

div.extra-wrapper { 
 
    padding: 0.5em 0; 
 
    margin-bottom: 1em; 
 
} 
 
div.extra_wrapper hr { 
 
    margin: 1em; 
 
} 
 
p.top-p { 
 
    margin: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header"> 
 
    <p>This is the header content.</p> 
 
</div> 
 
<div class="extra-wrapper"> 
 
    <hr> 
 
</div> 
 
<p class="top-p"> 
 
    Lorem ipsum dolor... 
 
</p> 
 
<label>Space: 
 
    <input id="space" type="text"> 
 
</label>

謝謝。

Answer 1

的解決方案是使用兩個元件的offset().top值（由@adeneo所示和@georg）和減去所述第一元件的高度。我不需要計算邊界，邊距和填充自己。

找到下一個元素並不像我原先認爲的那樣困難。

確定第一個元素的高度不是太棘手，但height()和innerHeight()都不會這樣做。我必須使用DOM元素上的屬性offsetHeight。

我需要的是這樣的：

var space = $next.offset().top - ($hr.offset().top + $hr[0].offsetHeight)` 

我不會已經能夠想出解決辦法，如果不是因爲被@adeneo和@georg答案的評論，但沒有一個提供完整的解決方案。

下面的例子也有在CodePen稍微更詳細的版本：）calculate space between two elements

var find_next = function($el) { 
 
    $next = $el.next(); 
 
    while (!$next.length) { 
 
    find_next($el.parent()); 
 
    } 
 
    return $next; 
 
} 
 

 
$(window).load(function() { 
 
    var $header = $('#header'); 
 
    var $hr = $header.siblings('.extra-wrapper').find('hr'); 
 
    var $after_header = find_next($hr); 
 
    
 
    var hr_top = $hr.offset().top; 
 
    var hr_bottom = $hr[0].offsetHeight + hr_top; 
 
    var after_header_top = $after_header.offset().top; 
 
    var space_between = after_header_top - hr_bottom; 
 
    
 
    $('.space-between').css({ 
 
    'top': hr_bottom, 
 
    'height': space_between, 
 
    'line-height': space_between + 'px' 
 
    }); 
 
    $('.space-between .info').text(space_between + 'px'); 
 
});

div.extra-wrapper { 
 
    margin: 1em; 
 
} 
 

 
div.extra-wrapper hr { 
 
    margin: 1em; 
 
} 
 

 
p.top-p { 
 
    margin-top: 1.5em; 
 
} 
 

 
div.space-between { 
 
    position: absolute; 
 
    left: 150px; 
 
    height: 20px; 
 
    width: 20px; 
 
    border-color: #f0f; 
 
    border-style: solid; 
 
    border-width: 1px 0 1px 1px; 
 
    border-radius: 3px; 
 
    white-space: nowrap; 
 
    text-indent: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header"> 
 
    <p>This is the header section with the logo.</p> 
 
    <h1 class="logo"><a href="#0"><img alt="logo" src="http://lorempixel.com/64/64/people"></a></h1> 
 
</div> 
 
<div class="page-divider"></div> 
 
<div class="extra-wrapper"> 
 
    <hr> 
 
</div> 
 
<div class="content"> 
 
    <p class="top-p"> 
 
    Lorem ipsum dolor ... 
 
    </p> 
 
</div> 
 

 
<div class="space-between"> 
 
    <span class="info">Space between: </span> 
 
<div class="show-position-info"></div>

Answer 2

如何：

next = function($el) { 
 
    while($el.length) { 
 
    var s = $el.next(); 
 
    if (s.length) return s; 
 
    $el = $el.parent(); 
 
    } 
 
} 
 

 
hr = $('hr'); 
 

 
alert(next(hr).offset().top - hr.offset().top)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<section> 
 
<div> 
 
    <div class="extra-wrapper"> 
 
     <p>The line.... this.</p> 
 
     <hr> 
 
    </div> 
 
</div> 
 
</section> 
 

 
<p class="top-p"> 
 
    Lorem ipsum dolor... 
 
</p>