JavaScript 获取内容框的大小

Question

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

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

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

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

Answer 1

取自对 similar question 的回答;您可以使用 window.getCompulatedStyle(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;