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

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

我想知道一个特定的

hr

和下面显示的内容之间有多少空间。从视觉上看，可以是段落、标题、图像或其他任何内容，但是

hr

和下一个内容都可以嵌套在其他块中。所以，我所说的“呈现元素”是指页面上下一个可见的东西

我之所以需要这样做，是因为我需要在

hr

，

位置：relative

之后插入一个元素，并且我不想向下移动内容，除非我拥有的空间比新元素短。如果空间较短，我只想尽可能地向下移动内容，以避免覆盖内容

我根本无法控制HTML的生成。我只能向生成的页面添加代码

下面是我正在使用的HTML示例：

将页眉与页面其余部分分开的行在此下方



洛雷姆·伊普苏姆·多洛。。。

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

我还想到下一个元素可能是兄弟。所以我需要检查

$hr.next（）

是否有一个值，我在下面的代码段中没有这样做

$（函数（）{
变量$header=$（“#header”）；
var$hr=$header.sides（'.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'））；
/*说明垂直边距的折叠*/
var最大利润率；
if（额外包装纸底部边缘>hr底部边缘）{
最大利润=额外的包装利润(下利润);；
}否则{
最大利润率=人力资源最低利润率；
}
如果（下一个元素顶部边缘>最大边缘）{
最大_边距=下一个_元素_顶部_边距；
}
var space\u between=最大利润+hr\u bottom\u padding+额外的\u包装器\u bottom\u padding+下一个\u元素\u top\u padding；
$（'#space'）.val（之间的空格）；
});
div.extra-wrapper{
填充：0.5em0；
边缘底部：1米；
}
部门额外费用{
边缘：1米；
}
p、 top-p{
边缘：1米；
}

这是标题内容



洛雷姆·伊普苏姆·多洛。。。

空间：
那么：


next=函数（$el）{
而（$el.length）{
var s=$el.next（）；
如果（s.length）返回s；
$el=$el.parent（）；
}
}
hr=$（'hr'）；
警报（下一个（hr.offset（）.top-hr.offset（）.top）

线路。。。。这个



洛雷姆·伊普苏姆·多洛。。。
解决方案是使用
偏移量（）。将两个元素的值（如@adeneo和@georg所示）置于顶部，然后减去第一个元素的高度。我不需要自己计算边界、边距和填充

找到下一个元素并不像我最初认为的那样困难

确定第一个元素的高度并不太复杂，但无论是
height（）
还是
innerHeight（）
都无法做到这一点。我必须使用DOM元素的属性

我需要这样的东西：

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

如果没有@adeneo的评论和@georg的回答，我就无法理解这一点，但两人都没有提供完整的解决方案

下面的示例在CodePen上还有一个更详细的版本：


var find\u next=函数（$el）{
$next=$el.next（）；
while（！$next.length）{
查找下一个（$el.parent（））；
}
返回$next；
}
$（窗口）。加载（函数（）{
变量$header=$（“#header”）；
var$hr=$header.sides（'.extra-wrapper'）。find（'hr'）；
var$after\u header=find\u next（$hr）；
var hr_top=$hr.offset（）.top；
var hr_bottom=$hr[0]。远视+hr_top；
\u header\u top之后的var=$after\u header.offset（）.top；
var space_between=在_header_top之后-hr_bottom；
$（'.space-between'）.css({
“顶部”：hr_底部，
“高度”：在，
“行高”：+'px'之间的空间_
});
$（'.space-between.info'）.text（space_-between+'px'）；
});
div.extra-wrapper{
边缘：1米；
}
部门额外费用{
边缘：1米；
}
p、 top-p{
边缘顶部：1.5em；
}
间隔{
位置：绝对位置；
左：150px；
高度：20px；
宽度：20px；
边框颜色：#f0f；
边框样式：实心；
边框宽度：1px 0 1px 1px；
边界半径：3px；
空白：nowrap；
文本缩进：10px；
}

这是带有徽标的标题部分



洛雷姆·伊普苏姆·多洛。。。

间距：
在使用jQuery时，您可以访问
offset（）
，它获取元素相对于文档的当前坐标。你真正需要做的就是得到这两个元素的偏移量subtract@adeneo这将使我得到两个元素顶部之间的空间。我需要第一个元素底部和第二个元素顶部之间的空间。但是，使用
offset（）
可能会节省一些工作。如果我能准确地测量元素的高度，也许我不需要担心元素是嵌套的。我一直在玩这个，看起来jQuery不能做到这一点，但我可以用它