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

Question

在主题中，如何使用jQuery获取元素的总宽度（包括其边框和填充）？我已经得到了jQuery插件的尺寸，并在我的760px宽，10px的填充DIV运行.WIDTH（）返回760

也许我做错了什么，但如果我的元素表现为780个像素宽和Firebug告诉我，它上面有10px填充，但调用.width（）只能得到760，我很难看到它是如何实现的。

感谢您的任何建议。

Answer 1

[更新]

原始答案之前jQuery的1.3，并且在所述时间，其中不充分本身来计算整个宽度存在的功能写入。现在

，如J-P正确地指出，jQuery有其中包括border和padding默认，以及还有margin如果该函数的第一个参数是true

---

[原件的功能outerWidth和outerHeight回答]

width方法不再需要dimensions插件，b ecause它已被添加到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 

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

这样，你总是会得到正确的计算值，即使你CH安格从CSS填充或空白值

Answer 2

任何人绊倒在此答案应该注意到，现在的jQuery（> = 1.3）具有outerHeight/outerWidth函数检索宽度包括填充/边界，例如

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

要包括保证金为好，简单地传递true：

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

Answer 3

看起来outerWidth在jQuery的最新版本打破。

当

外层的div被浮置的差异发生， 内div有宽度集合（比外层div小） 内div有风格=“余量：汽车”

Answer 4

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

只是为了简单起见，我在上面的一些函数中封装了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 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>