javascript - 外部元素边距不等于内部元素边距

Question

我正在使用 Android WebView 来显示我的应用程序的 HTML 内容。我需要动态找到一个元素(通常是一个 div)的完整高度，包括填充、边距和边框。我正在使用 JavaScript，但无法使用 jQuery。

我一直在我的 div 上使用 scrollHeight 来获取高度。我使用 var style = window.getComputedStyle(DIV, null); 获得了 div 的计算样式，并通过调用 style.marginTop 和 获得了顶部和底部边距>style.marginBottom。它们都是 0px。问题是 scrollHeight 仍然没有说明属于 div 的边距的高度。

我得到了我的 div 的子元素(通常是 P 或 H* 标签)并以相同的方式获得相同的字段:scrollHeight、marginTop 和 边距底部。 scrollHeight 完全相同(因为我通常每个 div 只有一个子元素)，但子元素中通常有一个上边距值或下边距值，但不会反射(reflect)在父元素中。

我真的不明白为什么会这样。看起来 child 的边距是在父级之外呈现的，但是父级不知道它，也不能直接访问它。

我正在寻找一种方法来通过父元素访问子元素定义的边距。这可能吗？

This Question非常有帮助，但我没有找到以这种方式呈现它并且线程似乎变冷的根本原因。

谢谢!

Answer 1

Sim Vidas 为我指明了正确的方向，非常感谢!

我发现自己试图找出 div 和它们的 child 之间折叠边距的确切高度(但在我的问题中措辞非常不同)。当通过 DOM 访问该信息时，它会告诉我父项和子项的样式属性，但它不会报告任何折叠边距的高度。

所以...我的问题的真正答案是否定的。我一直无法找到直接访问折叠边距属性的方法。

同样好的方法是获取我的 div 的 offsetTop 属性，并找出下一个 Div 的 offsetTop 属性之间的区别。这给出了总高度，包括边距的最终渲染。要仅查找边距，请减去 scrollHeight。

这可能不适用于所有情况，但对于我的目的来说已经足够了。