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

如同在主题中一样，如何使用 jQuery 获得元素的总宽度，包括它的边框和填充？我得到了 jQuery 维度插件，在我的 760px-wide上运行 .width()，10px padding DIV 返回 760。

也许我做错了什么，但是如果我的元素显示为 780 pixels wide，而 Firebug 告诉我它上面有 10px padding，但是调用 .width()只能得到760，我将很难看出原因。

谢谢你的建议。

139249 次浏览
小开
最佳答案

[更新]

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

现在，正如 J-P正确指出的那样，jQuery 具有函数 外宽和 外围高度，它们默认包括 border和 padding，如果函数的第一个参数是 true，那么还包括 margin

[原始答案]

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 中的填充值或边距值，也始终可以获得正确的计算值

小开

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

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

要包括边际，只需通过 true:

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

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

这种差异发生在

外部 div 是浮动的, 内部 div 具有宽度设置(小于外部 div) 内部 div 具有 style = “间距: 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"));
小开

为了简单起见，我在一些函数中封装了 AndreasGrech 的伟大答案。对于那些想要快乐的人来说。

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;
}
小开 
$(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>

提交答案