当没有内联高度声明时,是否有人知道是否可以获得元素的高度(减去垂直填充,边框和边距)?我需要支持IE8及以上版本。
el.style.height
不起作用,因为样式是在外部样式表中设置的。
el.offsetHeight
或el.clientHeight
不起作用,因为它们不仅仅包含元素的高度。而且我不能简单地减去元素的填充等,因为这些值也是在CSS样式表中设置的,而不是内联的(因此el.style.paddingTop
不起作用)。< / p>
也无法window.getComputedStyle(el)
,因为IE8不支持此功能。
jQuery有height()方法,它提供了这个,但我在这个项目中没有使用jQuery,而且我只是想知道如何在纯JavaScript中这样做。
有人有什么想法吗?非常感谢。
答案 0 :(得分:49)
这是适用于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
。
答案 1 :(得分:13)
改进了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;
答案 2 :(得分:9)
你走了:
var style = window.getComputedStyle(document.getElementById("Example"), null);
style.getPropertyValue("height");
以上版本适用于现代浏览器。请检查IE浏览器的currentStyle。
跨浏览器:
try {
el = window.getComputedStyle(document.getElementById('example'), null)
.getPropertyValue('height');
} catch(e) {
el = document.getElementById('example').currentStyle.height;
}
答案 3 :(得分:1)
在IE8
中尝试element.currentStyle。但请记住,borderRightWidth
(borderLeftWidth)
不会返回像素,而是“瘦”,“中等”,“#39”。
答案 4 :(得分:0)
将Dan的答案变成一个函数
export const innerDemensions = (node) => {
var computedStyle = getComputedStyle(node)
let height = node.clientHeight // height with padding
let width = node.clientWidth // width with padding
height -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom)
width -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight)
return { height, width }
}