jquery - jQuery 中元素的总宽度(包括填充和边框)

Question

在主题中，如何使用 jQuery 获取元素的总宽度，包括其边框和填充？我有 jQuery 尺寸插件，在我的 760px-wide 上运行 .width()，10px padding DIV 返回 760 。

也许我做错了什么，但如果我的元素显示为 780 像素宽，并且 Firebug 告诉我上面有 10px padding，但调用 .width() 只给出 760，我很难看出如何。

感谢您的任何建议。

Answer 1

[更新]

原始答案是在 jQuery 1.3 之前编写的，当时存在的函数本身不足以计算整个宽度。

现在，作为J-P正确指出，jQuery 具有函数 outerWidth和 outerHeight默认情况下包括 border 和 padding，如果函数的第一个参数为 true，还包括 margin

---

[原始答案]

width 方法不再需要 dimensions 插件，因为它已被添加到 jQuery Core

您需要做的是获取该特定 div 的填充、边距和边框宽度值，并将它们添加到 width 方法的结果中

像这样:

var theDiv = $("#theDiv");
var totalWidth = theDiv.width();
totalWidth += parseInt(theDiv.css("padding-left"), 10) + parseInt(theDiv.css("padding-right"), 10); //Total Padding Width
totalWidth += parseInt(theDiv.css("margin-left"), 10) + parseInt(theDiv.css("margin-right"), 10); //Total Margin Width
totalWidth += parseInt(theDiv.css("borderLeftWidth"), 10) + parseInt(theDiv.css("borderRightWidth"), 10); //Total Border Width

分成多行以使其更具可读性

这样你总能得到正确的计算值，即使你改变了 css 的 padding 或 margin 值