开发者

Non integer DOMElement heights

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 开发者_StackOverflow社区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.


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜