2012-09-14 121 views
2

我正在使用Android WebView来显示我的应用程序的HTML内容。我需要动态查找元素的全部高度(通常是div),包括填充,边距和边框。我正在使用JavaScript,并且不能使用jQuery。外部元素边距不等于内部元素边距

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

我得到了我的div的子元素(通常是P或H *标签),并以相同的方式获得相同的字段:scrollHeight,marginTopmarginBottomscrollHeight是完全相同的(因为我通常每个div只有一个孩子),但通常在子元素中有一个顶部或底部的边距值,这并不反映在父元素中。

我真的不明白为什么会这样。通过小孩的保证金显示在父母之外,但父母不知道,并且不能直接访问它。

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

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

谢谢!

+1

它被称为“崩溃边缘”。 http://www.w3.org/TR/css3-box/#collapsing-margins如果内部元素具有垂直边距,并且外部元素没有垂直填充/边界,则内部和外部的垂直边距元素合为一体。可以这么说,内缘泄漏到外面。 –

+0

那篇文章很有帮助!谢谢!这是否意味着我仍然需要单独计算利润率,即使它们合并为一个? – Jon

回答

1

Sime Vidas指出我正确的方向,所以谢谢!

我发现自己试图找出divs和他们的孩子之间崩溃边缘的确切高度(但在我的问题上措辞大不相同)。通过DOM访问该信息时,它会告诉我父母和孩子的风格属性,但不会报告任何折叠边距的高度。

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

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

这可能不适用于所有场景,但对我的目的来说已经足够了。