javascript - 获取元素的高度减去填充、边距、边框宽度

Question

有谁知道在没有行内高度声明时是否可以只获取元素的高度(减去垂直填充、边框和边距)？我需要支持IE8及以上版本。

el.style.height 不起作用，因为样式是在外部样式表中设置的。

el.offsetHeight 或 el.clientHeight 不起作用，因为它们不仅仅包含元素的高度。而且我不能只减去元素的填充等，因为这些值也在 CSS 样式表中设置，而不是内联(因此 el.style.paddingTop 不起作用)。

也不能执行 window.getComputedStyle(el) 因为 IE8 不支持这个。

jQuery 有 height() 方法，它提供了这个，但我没有在这个元素中使用 jQuery，而且我只是想知道如何在纯 JavaScript 中做到这一点。

有人有什么想法吗？非常感谢。

Answer 1

这是适用于 box-sizing 两种情况的解决方案:content-box 和 border-box。

var computedStyle = getComputedStyle(element);

elementHeight = element.clientHeight;  // height with padding
elementWidth = element.clientWidth;   // width with padding

elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
elementWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

适用于 IE9+

可以使用特征检测

if (!getComputedStyle) { alert('Not supported'); } 

如果元素的 display 是 inline，这将不起作用。使用 inline-block 或使用 getBoundingClientRect。