我使用填充来限制内容框的大小。我需要一种获取内容框宽度和像素高度的方法。
我愿意解决诸如嵌套元素,伪元素之类的问题,尝试一些诸如弹性框设置之类的事情。
但是,获取这些值的一种普通JavaScript方法是问题所在。
示例:http://codepen.io/anon/pen/lbzJi
最佳答案
取自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;