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

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 和 marginBottom。 scrollHeights 是完全相同的（因为我通常每个 div 只有一个子元素），但子元素中通常有一个顶部或底部边距值，它不会反映在父元素中。

我真的不明白为什么会这样。看起来好像通过 child 的 margin 渲染在 parent 之外，但是 parent 不知道它，并且不能直接访问它。

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

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

谢谢！

Answer 1

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

我发现自己试图找出 div 与其子级之间折叠边距的确切高度（但在我的问题中措辞大不相同）。当通过 DOM 访问该信息时，它会告诉我父母和孩子的样式属性，但它不会报告任何折叠边距的高度。

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

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

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