JavaScript获取内容框的大小

JavaScript get size of content box

本文关键字：获取 JavaScript      更新时间：2023-09-26

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

我对诸如嵌套元素、伪元素之类的工作持开放态度，并尝试诸如灵活框设置之类的设置。

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

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

取自类似问题的答案；您可以使用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;

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

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

好吧，你可以试试：

element.clientHeight    
element.clientWidth

-或-

element.offsetWidth
element.offsetHeight

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

相关文章：