[解決済み] jQueryでの要素の合計幅（パディングとボーダーを含む

質問

お題のように、jQueryを使って、ボーダーやパディングを含む要素の全幅を取得するにはどうしたらよいでしょうか？ 私はjQuery dimensionsプラグインを持っていて、以下を実行しています。 .width() 私の 760px-wide , 10px padding DIVが返す 760 .

もしかしたら私のやり方が悪いのかもしれませんが、もし私の要素が 780 pixels wide と表示され、Firebugでは 10px padding を呼び出すと、その上に .width() は760しか表示されないのですが、どうなんでしょう？

何かご指摘があれば、ありがとうございます。

解決方法は？

[更新】のお知らせ］

元の回答はjQuery 1.3より前に書かれたもので、当時存在した関数だけでは全体の幅を計算するのに十分ではありませんでした。

現在では ジェイピー を正しく表現するために、jQueryは関数 外側幅 と アウターハイト を含む。 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の値を変更しても、常に正しい計算値が得られます。