Answers:
[更新]
最初的答案写在jQuery 1.3之前,而当时存在的函数本身不足以计算整个宽度。
现在,正如JP正确指出的那样,jQuery具有函数externalWidth和outsideHeight,它们默认包含border
和padding
,margin
如果函数的第一个参数是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值,也将始终获得正确的计算值。
parseInt
s时,可以更改为+
操作者使代码更简洁。因此,parseInt(theDiv.css("padding-left"), 10)
可以转向+theDiv.css("padding-left")
等等...
绊脚石回答这个问题的其他人应该注意,jQuery现在(> = 1.3)具有outerHeight
/ outerWidth
函数来检索宽度,包括填充/边界,例如
$(elem).outerWidth(); // Returns the width + padding + borders
要同时包含边距,只需传递true
:
$(elem).outerWidth( true ); // Returns the width + padding + borders + margins
为了简单起见,我在一些函数中封装了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;
}
相同的浏览器可能会返回字符串的边框宽度,在此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"));
$(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>