有人知道当没有内联高度声明时，是否可以只获取元素的高度（减去垂直填充、边框和边距）？我需要支持IE8及更高版本。
el.style。高度不起作用，因为样式是在外部样式工作表中设置的。
el. offsetHeight或el.clientHeight不起作用，因为它们包含的不仅仅是元素的高度。我不能只减去元素的填充等，因为这些值也是在CSS样式表中设置的，而不是内联的（因此el.style.paddingTop不起作用）。
也不能做window. getComputedStyle（el），因为IE8不支持这个。
jQuery有高度（）方法，它提供了这个，但我没有在这个项目中使用jQuery，另外我只是想知道如何在纯JavaScript中执行此操作。
有人有什么想法吗？非常感谢。
以下是适用于box大小两种情况的解决方案：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'); }
如果元素的show是inline，这将不起作用。使用inline-block或使用getBoundingClientRect。
改进了Dan的代码以处理内联元素（使用offset*而不是client*）：
var cs = getComputedStyle(element);
var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
var paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
var borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
var borderY = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
// Element width and height minus padding and border
elementWidth = element.offsetWidth - paddingX - borderX;
elementHeight = element.offsetHeight - paddingY - borderY;
main. getComputedStyle将根据box-size的值返回高度。如果元素使用的是box：content-box；，则可以使用getComputedStyle来计算没有填充或边框的高度：
var style = window.getComputedStyle(document.getElementById("Example"), null);
style.getPropertyValue("height");
上述版本将在现代浏览器中工作。请检查IE浏览器的当前风格。
跨浏览器：
try {
el = window.getComputedStyle(document.getElementById('example'), null)
.getPropertyValue('height');
} catch(e) {
el = document.getElementById('example').currentStyle.height;
}
来源
