Question

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

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

感谢您的任何建议。

Answer 1

<强> [更新]

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

现在，正如J-P正确陈述的那样，jQuery的函数outerWidth和outerHeight默认包含border和padding，以及{ {1}}如果函数的第一个参数是margin

[原始回答]

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

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

这样的事情：

width

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

这样，即使您从css更改填充或边距值，您也将始终获得正确的计算值

Answer 2

任何绊倒这个答案的人都应该注意，现在jQuery（＆gt; = 1.3）有 outerHeight / outerWidth 函数来检索宽度包括填充/边框，例如

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

要包含保证金，只需传递 true ：

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

Answer 3

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

时出现差异

外部div浮动，内部div的宽度设置（小于外部div）内部div有style =“margin：auto”

Answer 4

为了简单起见，我在一些函数中将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;
}

Answer 5

相同的浏览器可能会为边框宽度返回字符串，在此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"));

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>

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

6 个答案: