JavaScript 获取内容框的大小

Question

我使用填充来限制内容框的大小。我需要一种方法来获取内容框宽度和高度的大小（以像素为单位）。

我愿意尝试解决诸如嵌套元素、伪元素之类的问题，尝试诸如弹性框设置之类的东西。

然而，问题的主题是获取这些值的普通 JavaScript 方法。

示例： http: //codepen.io/anon/pen/lbzJi

Answer 1

取自对a的答案摘自类似问题；您可以使用它window.getComputedStyle(element, null).getPropertyValue('css-property');来获取计算的 CSS 属性的值。在您的情况下，您可以将其用于属性padding-left、padding-right和padding-top。padding-bottom

例如，要计算“box”div 的内容框的高度，您可以执行类似于以下操作的操作，其中我假设填充被指定为整数（因此是parseInt）；

function property(e, p) { 
    return parseInt(window.getComputedStyle(e, null).getPropertyValue(p)); 
}

var box = document.getElementById('box');
var paddingTop = property(box, 'padding-top');
var paddingBottom = property(box, 'padding-bottom');    
var contentHeight = box.clientHeight - paddingTop - paddingBottom;