jQuery 中元素的总宽度（包括内边距和边框）

Question

正如主题所示，如何使用 jQuery 获取元素的总宽度（包括其边框和填充）？我有 jQuery 尺寸插件，在 760 像素宽、10 像素填充 DIV 上运行 .width() 返回 760。

也许我做错了什么，但如果我的元素显示为 780 像素宽，并且 Firebug 告诉我它有 10px 填充，但调用 .width() 只给出 760，我很难知道如何实现。

感谢您的任何建议。

Answer 1

[更新]

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

现在，作为 J.P 正确地说，jQuery 具有以下功能 外宽 和 外部高度 其中包括 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 中的填充或边距值，您也将始终获得正确的计算值

Answer 2

任何人绊倒在此答案应该注意，jQuery的现在（> = 1.3）具有的 outerHeight / <强> outerWidth 函数来检索该宽度包括填充/边界，例如

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

要包括余量，以及，简单地传递的 true ：

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

Answer 3

看起来像outerWidth在jquery的最新版本打破。

发生的差异时

外层的div是浮动的， 内div有宽度集合（比外层div小） 内div有风格= “余量：自动”

Answer 4

只是为了简单起见，我上面封装在一些功能安德烈亚斯格列奇最伟大的答案。对于那些谁想要有点剪切和粘贴幸福的。

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;
}

Answer 5

相同的浏览器可能对于边框宽度返回字符串，在该parseInt函数将返回的NaN 所以一定要分析的价值适当地诠释。

        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"));

Answer 6

$(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>