非整数 DOMElement 高度

发布于 2024-10-28 18:21:11 字数 853 浏览 5 评论 0原文

我有一个包含行的表格,需要计算出任何行的高度。

var height = $('table').find('tbody > tr').height();
console.log(height);

在我的特定情况下,结果是18。好的,我用它来计算可滚动 div 中的索引。这是 index = scrollTop / rowHeight 但有些不对。

经过进一步调查,我发现本例中 IE9 报告的高度实际上是 18.4。使用该值进行计算。

我不知道如何获得这个值。我尝试过使用 jQuery、innerHeightouterHeight(包括和不包括边距)和 height 的所有方法。它们都返回18一个整数!?表高度除以行数是一个公平的近似值 (18.40625),但是该值会导致细微的舍入误差。我尝试了roundfloorceil但没有成功。

到目前为止,我设法使其正常工作的唯一方法是将每个行高固定为某个整数值。但我真的想消除它,并且我应该能够计算行高,这样它可以是任何值,只要它是恒定的。

这个 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

菊凝晚露 2024-11-04 18:21:11

这很痛苦,但我相信您应该能够通过 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文