165

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

也许我做错了什么，但如果我的元素表现为780 pixels wide并且 Firebug 告诉我它上面有10px padding，但调用.width()只给出 760，我很难知道如何。

感谢您的任何建议。

4

6 回答 6

219

[更新]

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

现在，正如JP正确指出的那样，jQuery 具有函数outerWidth和outerHeight ，默认情况下包括borderand ，如果函数的第一个参数是paddingmargintrue

[原答案]

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

于 2008-12-08T14:30:59.040 回答
187

任何其他偶然发现这个答案的人都应该注意，jQuery now (>=1.3) 有outerHeight/outerWidth函数来检索包括填充/边框在内的宽度，例如

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

要包括边距，只需传递true：

$(elem).outerWidth( true ); // Returns the width + padding + borders + margins
于 2009-03-23T14:41:06.433 回答
2

看起来 outerWidth 在最新版本的 jquery 中被破坏了。

差异发生在

外部 div 是浮动的，内部 div 设置了宽度（小于外部 div）内部 div 有 style="margin:auto"

于 2011-04-09T03:10:32.663 回答
2

为简单起见，我在一些函数中封装了 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;
}
于 2012-09-26T21:22:01.603 回答
0

相同的浏览器可能会返回边框宽度的字符串，在此 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"));
于 2011-08-18T16:41:52.417 回答
0 
$(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>
于 2012-12-24T15:27:48.683 回答