jQuery中元素的总宽度（包括填充和边框）
在主题中，如何使用jQuery获取元素的总宽度（包括边框和填充）？ 我有jQuery尺寸插件，并在我的760px宽，10px填充DIV返回760上运行.width（）。
也许我做错了，但如果我的元素自身显示为780像素宽，Firebug告诉我，它有10px的填充，但调用.width（）只给了760，我很难看到如何。
感谢您的任何build议。
[更新]
原来的答案是在jQuery 1.3之前编写的，当时存在的函数不足以自己计算整个宽度。
现在，正如JP正确地指出，jQuery的functionouterWidth和outerHeight ，其中包括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中更改填充或边距值，您也将始终得到正确的计算值
任何人都绊倒这个答案应该注意，现在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 =“margin：auto”
为了简单起见，我在上面的一些函数中封装了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; }
相同的浏览器可能会返回string的边界宽度，在这个parseInt将返回NaN，所以请确保您parsing值为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"));
$(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>
