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


164

就像本主题一样,如何使用jQuery获取元素的总宽度,包括其边框和填充?我已经得到了jQuery插件的尺寸,并运行.width()在我760px-wide10px paddingDIV的回报760

也许我做错了什么,但是如果我的元素表现为as 780 pixels wide并且Firebug告诉我它已经10px padding在上面,但是.width()只调用760,我很难知道怎么做。

感谢您的任何建议。

Answers:


216

[更新]

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

现在,正如JP正确指出的那样,jQuery具有函数externalWidthoutsideHeight,它们默认包含borderpaddingmargin如果函数的第一个参数是true


[原始回答]

width方法不再需要dimensions插件,因为它已被添加到jQuery Core

您需要做的是获取该特定div的padding,margin和border宽度值,并将它们添加到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更改了padding或margin值,也将始终获得正确的计算值。


3
通常,我宁愿相信jQuery,也不愿自己进行计算。问题是width()函数实际上没有指定在“ box-sizing:border-box”情况下的功能。我刚刚测试过,它返回的内部宽度不包括填充等。这可能正确,也可能不正确。不同的人可能期望不同的事情。因此,上面的代码示例实际上可以工作,但它可能不是最可靠的方法。如其他答案所示,我建议您改用externalWidth()函数。它至少保证了文档中的要求。
1月

4
当我编写此答案时,outerWidth / outerHeight函数不存在。
Andreas Grech

如果有人还在使用我的旧代码,只需快速评论一下;该parseInts时,可以更改为+操作者使代码更简洁。因此,parseInt(theDiv.css("padding-left"), 10)可以转向+theDiv.css("padding-left")等等...
Andreas Grech 2012年

182

绊脚石回答这个问题的其他人应该注意,jQuery现在(> = 1.3)具有outerHeight/ outerWidth函数来检索宽度,包括填充/边界,例如

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

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

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

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

2

在最新版本的jquery中,outerWidth似乎已损坏。

差异发生在

外部div浮动,内部div具有宽度设置(小于外部div),内部div具有style =“ margin:auto”


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

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

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>

感谢您发布答案!请务必仔细阅读有关自我促销常见问题解答。另请注意,每次链接到您自己的站点/产品,您都必须发布免责声明。
Andrew Barber
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.