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

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

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

谢谢你的任何建议.

1> Andreas Grec..：

---

[更新]

最初的答案是在jQuery 1.3之前编写的,以及当时存在的函数,这些函数本身并不足以计算整个宽度.

现在,如JP正确地指出,jQuery有功能outerWidth和outerHeight其中包括border和padding默认,并且还margin如果该函数的第一个参数是true

---

[原始答案]

该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更改填充或边距值,您也将始终获得正确的计算值

---

当我写这个答案时,outerWidth/outerHeight函数不存在.

---

一般来说,我宁愿相信jQuery而不是自己做计算.问题是width()函数实际上没有指定它在"box-sizing:border-box"的情况下做了什么.我只是测试了它,它返回内部宽度,不包括填充等.这可能是也可能不正确; 不同的人可能期待不同的事情.因此上面的代码示例实际上可行,但它可能不是最可靠的方式.如其他一些答案所示,我建议使用outerWidth()函数.它至少承诺它在文档中应该是什么.

2> James..：

---

任何绊倒这个答案的人都应该注意jQuery now(> = 1.3)有outerHeight/ outerWidth函数来检索宽度,包括填充/边框,例如

$(elem).outerWidth(); // Returns the width + padding + borders

要包括保证金,只需通过true:

$(elem).outerWidth( true ); // Returns the width + padding + borders + margins

---

我没有编辑功能,但我会将第一个注释更改为://返回宽度+填充+边框并将第二个注释更改为//返回宽度+填充+边框+边距