JavaScript 获取内容框的大小答案

【问题标题】：JavaScript get size of content boxJavaScript 获取内容框的大小
【发布时间】：2014-06-13 15:05:34
【问题描述】：

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

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

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

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

【问题讨论】：

你的代码在哪里？
element.offsetWidth 和 element.offsetHeight 怎么样？
这与任何特定代码无关。这是一个例子：codepen.io/anon/pen/lbzJi
从this answer，你可以做window.getComputedStyle(box, null).getPropertyValue('padding-top'));，用var box = document.getElementById('box'); 那将返回'20px'，你可以从clientWidth / clientHeight中减去。如果你对所有填充值都这样做，你应该很好。
@daniel-knippers 您能否将其发布为答案，尤其是 window.getComputedStyle 部分正是我自己需要做的数学运算。

标签： javascript dom

【解决方案1】：

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

例如，要计算“框”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;

【讨论】：

【解决方案2】：

使用 jquery 试试这个：http://codepen.io/anon/pen/shoun

$(document).ready(function(){
  $("pre").append("Total Height = " + ($("#box").height() - parseInt($("#box").css("padding-top"))));
});

【讨论】：

【解决方案3】：

嗯，你可以试试：

element.clientHeight    
element.clientWidth

-或-

element.offsetWidth
element.offsetHeight

取决于你想要什么，但我们需要一些代码来真正帮助你。

【讨论】：

如此处所示codepen.io/anon/pen/lbzJi 这些不是所需的值。