javascript - 如何计算两个元素之间的空间？

Question

如何计算一个元素和下一个渲染元素之间的空间量？

我想找出特定 hr 与其下方显示的内容之间有多少空间。从视觉上看，它可以是段落、标题、图像或其他任何内容，但 hr 和下一个内容都可以嵌套在其他 block 中。因此，“渲染元素”是指页面上的下一个可见元素。

我需要这个的原因是我需要在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> 

如果它总是这样，下面的代码片段可能会起作用，但问题是我开始的元素和页面上可见的下一个元素可能以不可预测的方式嵌套在其他 block 中。

我还想到下一个元素可能是兄弟元素。所以我需要检查 $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

怎么样:

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>