非整数 DOMElement 高度
我有一个包含行的表格,需要计算出任何行的高度。
var height = $('table').find('tbody > tr').height();
console.log(height);
在我的特定情况下,结果是18
。好的,我用它来计算可滚动 div 中的索引。这是 index = scrollTop / rowHeight
但有些不对。
经过进一步调查,我发现本例中 IE9 报告的高度实际上是 18.4
。使用该值进行计算。
我不知道如何获得这个值。我尝试过使用 jQuery、innerHeight
、outerHeight
(包括和不包括边距)和 height
的所有方法。它们都返回18
一个整数!?表高度除以行数是一个公平的近似值 (18.40625
),但是该值会导致细微的舍入误差。我尝试了round
、floor
和ceil
但没有成功。
到目前为止,我设法使其正常工作的唯一方法是将每个行高固定为某个整数值。但我真的想消除它,并且我应该能够计算行高,这样它可以是任何值,只要它是恒定的。
这个 18.4
是计算出的 line-height
,将其设置为整数可以解决问题,但我不想处理设备像素。我不明白为什么没有某种方法可以获取开发人员工具所示的实际高度值(根据 MSDN 文档,它是 offsetHeight
但该属性是一个整数,这只是错误的)。
我需要帮助。
I have a table with rows and need to figure out the height of any row.
var height = $('table').find('tbody > tr').height();
console.log(height);
In my particular case, that yields 18
. Okay, so I'm using this to calculate the index within a scrollable div. That's index = scrollTop / rowHeight
but sometisn'ttsn't right.
Upon further investigation I found that the reported height, by IE9 in this case, is actually 18.4
. Using that value the calculation works.
What I cannot figure out is how to get at this value. All methods I've tried using jQuery, innerHeight
, outerHeight
(both including and without margins) and height
. They all return 18
an integer!? The table height over number of rows is a fair approximation (18.40625
) but, that value is causing subtle rounding errors. I've tried round
, floor
and ceil
to no avail.
The only way I so far managed to get this to work has been to fix each row height to some integer value. But I really wanted to do away with that and, I should be able to compute the row height, that way it can be any value, as long as it's constant.
This 18.4
is the computed line-height
and styling this to an integer fixes the problem but I don't wanna deal with device pixels. I don't understand why there isn't some way to get at the actual height value as shown by the developer tools (according to the MSDN documentation that's offsetHeight
but that property is an integer, which is just wrong).
I need help.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
这很痛苦,但我相信您应该能够通过 window.getCompulatedStyle(elem, null) 调用达到高度。如果您不在标准模式下使用 IE9,则需要改为使用 IE 专有的 elem.currentStyle 属性(其他浏览器自然使用标准调用)。请记住,您需要将元素的内边距和边框宽度添加到 style.height 值中,并且需要对该值进行 parseFloat,因为它会以“px”结尾。
It's painful, but I believe you should be able to get at the height with the window.getComputedStyle(elem, null) call. If you're not using IE9 in standards mode, you'll need to drop to the IE proprietary elem.currentStyle property instead (other browsers use the standard call, naturally). Remember that you'll need to add the padding and border width of the element to the style.height value, and you'll need do parseFloat the value, since it will come back with "px" on the end.