jQuery 中元素的总宽度（包括内边距和边框）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/349705/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Total width of element (including padding and border) in jQuery
提问by tags2k
As in the subject, how can one get the total width of an element, including its border and padding, using jQuery? I've got the jQuery dimensions plugin, and running .width()on my 760px-wide, 10px paddingDIV returns 760.
在主题中，如何使用 jQuery 获得元素的总宽度，包括其边框和填充？我有 jQuery 维度插件，并.width()在我的760px-wide, 10px paddingDIV上运行返回760。
Perhaps I'm doing something wrong, but if my element manifests itself as 780 pixels wideand Firebug tells me that there's 10px paddingon it, but calling .width()only gives 760, I'd be hard pressed to see how.
也许我做错了什么，但是如果我的元素显示为780 pixels wide并且 Firebug 告诉我它上面有10px padding，但是调用.width()只给出 760，我很难知道如何。
Thanks for any suggestions.
感谢您的任何建议。
回答by Andreas Grech
[Update]
[更新]
The original answer was written prior to jQuery 1.3, and the functions that existed at the time where not adequate by themselves to calculate the whole width.
原始答案是在 jQuery 1.3 之前编写的，当时存在的函数本身不足以计算整个宽度。
Now, as J-Pcorrectly states, jQuery has the functions outerWidthand outerHeightwhich include the borderand paddingby default, and also the marginif the first argument of the function is true
现在，正如JP正确指出的那样，jQuery 有函数外层宽度和外层高度，默认情况下包括border和padding，以及margin如果函数的第一个参数是true
[Original answer]
[原答案]
The widthmethod no longer requires the dimensionsplugin, because it has been added to the jQuery Core
该width方法不再需要dimensions插件，因为它已添加到jQuery Core
What you need to do is get the padding, margin and border width-values of that particular div and add them to the result of the widthmethod
您需要做的是获取该特定 div 的填充、边距和边框宽度值，并将它们添加到width方法的结果中
Something like this:
像这样的东西：
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
Split into multiple lines to make it more readable
拆分成多行以使其更具可读性
That way you will always get the correct computed value, even if you change the padding or margin values from the css
这样，您将始终获得正确的计算值，即使您更改了 css 中的填充或边距值
回答by James
Anyone else stumbling upon this answer should note that jQuery now (>=1.3) has outerHeight/outerWidthfunctions to retrieve the width including padding/borders, e.g.
任何其他在这个答案上绊倒的人都应该注意 jQuery 现在 (>=1.3) 有outerHeight/outerWidth函数来检索宽度，包括填充/边框，例如
$(elem).outerWidth(); // Returns the width + padding + borders
To include the margin as well, simply pass true:
要包括边距，只需通过true：
$(elem).outerWidth( true ); // Returns the width + padding + borders + margins
回答by bladnman
Just for simplicity I encapsulated Andreas Grech's great answer above in some functions. For those who want a bit of cut-and-paste happiness.
为简单起见，我在某些函数中封装了上面 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;
}
回答by Booker
looks like outerWidth is broken in the latest version of jquery.
看起来outerWidth 在最新版本的jquery 中被破坏了。
The discrepancy happens when
差异发生在
the outer div is floated, the inner div has the width set (smaller than the outer div) the inner div has style="margin:auto"
外层 div 是浮动的，内层 div 的宽度设置（小于外层 div）内层 div 有 style="margin:auto"
回答by Cherven
same browsers may return string for border width, in this parseInt will return NaN so make sure you parse value to int properly.
相同的浏览器可能会返回边框宽度的字符串，在此 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"));
回答by user1798002
$(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>
