回答:
[更新]
元の回答はjQuery 1.3より前に書かれたもので、当時存在していた関数自体では、全体の幅を計算するには不十分でした。
さて、とJPが正しくjQueryの機能を持っている、と述べouterWidthのと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からパディングまたはマージンの値を変更した場合でも、常に正しい計算値が得られます。
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>