jQuery中元素（包括填充和边框）的总宽度

与主题一样，如何使用jQuery获得元素的总宽度，包括其边框和填充？我已经有了jQuery维度插件，并在我的

760px宽

上运行

width（）

，

10px填充

DIV返回

760

也许我做错了什么，但是如果我的元素显示为780像素宽，Firebug告诉我它上面有

10px的填充，但是调用
.width（）
只能得到760，那么我很难知道怎么做

谢谢您的建议。
[更新]

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

现在，正如正确指出的那样，jQuery具有函数，默认情况下包括
边框
和
填充
，如果函数的第一个参数为
true


[原始答案]

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

您需要做的是获取该特定div的padding、margin和border width值，并将它们添加到
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中的填充或边距值
任何其他遇到此答案的人都应该注意，jQuery now（>=1.3）具有
outerHeight
outerWidth
函数来检索包括填充/边框在内的宽度，例如

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

要同时包含边距，只需传递
true：

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

在最新版本的jquery中，外层宽度似乎已损坏

这种差异发生在

外部div浮动，
内部div设置了宽度（小于外部div）
内部div具有style=“margin:auto”
相同的浏览器可能会返回边框宽度字符串，在此情况下，parseInt将返回NaN
所以请确保正确地将值解析为int

        var getInt = function (string) {
            if (typeof string == "undefined" || string == "")
                return 0;
            var tempInt = parseInt(string);

            if (!(tempInt <= 0 || tempInt > 0))
                return 0;
            return tempInt;
        }

        var liWidth = $(this).width();
        liWidth += getInt($(this).css("padding-left"));
        liWidth += getInt($(this).css("padding-right"));
        liWidth += getInt($(this).css("border-left-width"));
        liWidth += getInt($(this).css("border-right-width"));

var getInt=函数（字符串）{
如果（字符串类型==“未定义”| |字符串==“”）
返回0；
var tempInt=parseInt（字符串）；
如果（！（节拍0））
返回0；
返回tempInt；
}
var liWidth=$（this.width（）；
liWidth+=getInt（$（this）.css（“左填充”）；
liWidth+=getInt（$（this.css（“padding right”）；
liWidth+=getInt（$（this）.css（“边框左宽度”）；
liWidth+=getInt（$（this）.css（“右边框宽度”）；
为了简单起见，我将安德烈亚斯·格雷奇（Andreas Grech）的伟大答案封装在一些函数中。对于那些想要一点剪贴幸福的人

function getTotalWidthOfObject(object) {

    if(object == null || object.length == 0) {
        return 0;
    }

    var value       = object.width();
    value           += parseInt(object.css("padding-left"), 10) + parseInt(object.css("padding-right"), 10); //Total Padding Width
    value           += parseInt(object.css("margin-left"), 10) + parseInt(object.css("margin-right"), 10); //Total Margin Width
    value           += parseInt(object.css("borderLeftWidth"), 10) + parseInt(object.css("borderRightWidth"), 10); //Total Border Width
    return value;
}

function  getTotalHeightOfObject(object) {

    if(object == null || object.length == 0) {
        return 0;
    }

    var value       = object.height();
    value           += parseInt(object.css("padding-top"), 10) + parseInt(object.css("padding-bottom"), 10); //Total Padding Width
    value           += parseInt(object.css("margin-top"), 10) + parseInt(object.css("margin-bottom"), 10); //Total Margin Width
    value           += parseInt(object.css("borderTopWidth"), 10) + parseInt(object.css("borderBottomWidth"), 10); //Total Border Width
    return value;
}

$（文档）.ready（函数（）{
$（“div.width”）.append（$（“div.width”）.width（）+“px”）；
$（$div.innerWidth”）.append（$（$div.innerWidth”）.innerWidth（）+“px”）；
$（“div.outerWidth”）.append（$（“div.outerWidth”）.outerWidth（）+“px”）；
});
不包含填充的此div容器的宽度为：
此div容器（包括填充）的宽度为：
此div容器（包括填充和边距）的宽度为：
我没有编辑功能，但我会将第一条注释更改为：//返回宽度+填充+边框，将第二条注释更改为//返回宽度+填充+边框+边框一般来说，我宁愿相信jQuery，也不愿自己进行计算。问题是，width（）函数实际上没有指定在“框大小：边框框”情况下的操作。我刚刚测试了它，它返回了内部宽度，不包括填充等。这可能是正确的，也可能是错误的；不同的人可能期望不同的事情。因此，上面的代码示例实际上是可行的，但它可能不是最可靠的方法。如其他一些答案所示，我建议改用outerWidth（）函数。它至少承诺了它在文档中应该具备的功能。在我写这个答案时，outerWidth/outerHeight函数并不存在。如果有人还在使用它，请对我的旧代码进行快速评论；可以将
parseInt
s更改为
+
运算符，以使代码更加简洁。因此，
parseInt（theDiv.css（“padding left”），10）
可以变成
+theDiv.css（“padding left”）
等等……感谢您发布您的答案！请务必仔细阅读本手册。还请注意，每次链接到自己的网站/产品时，都需要发布免责声明。
$(document).ready(function(){     
$("div.width").append($("div.width").width()+" px");
$("div.innerWidth").append($("div.innerWidth").innerWidth()+" px");   
$("div.outerWidth").append($("div.outerWidth").outerWidth()+" px");         
});


<div class="width">Width of this div container without including padding is: </div>  
<div class="innerWidth">width of this div container including padding is: </div> 
<div class="outerWidth">width of this div container including padding and margin is:     </div>