Question

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

我开放工作就像嵌套元素，伪元素一样，尝试像弹性框设置一样。

然而，获得这些值的vanilla JavaScript方法是问题的主题。

Answer 1

取自similar question的答案;您可以使用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;

Answer 2

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

尝试此操作

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

Answer 3

好吧，你可以试试：

element.clientHeight    
element.clientWidth

-OR -

element.offsetWidth
element.offsetHeight

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

JavaScript获取内容框的大小

3 个答案: