获取元素的高度减去填充,边距,边框宽度

时间:2014-08-08 06:23:37

标签: javascript css

当没有内联高度声明时,是否有人知道是否可以获得元素的高度(减去垂直填充,边框和边距)?我需要支持IE8及以上版本。

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

el.offsetHeightel.clientHeight不起作用,因为它们不仅仅包含元素的高度。而且我不能简单地减去元素的填充等,因为这些值也是在CSS样式表中设置的,而不是内联的(因此el.style.paddingTop不起作用)。< / p>

也无法window.getComputedStyle(el),因为IE8不支持此功能。

jQuery有height()方法,它提供了这个,但我在这个项目中没有使用jQuery,而且我只是想知道如何在纯JavaScript中这样做。

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

5 个答案:

答案 0 :(得分:49)

这是适用于box-sizingcontent-boxborder-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'); } 

如果元素displayinline,则无效。使用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;
} 

source

答案 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 }
}