☰

jQuery の要素の合計幅 (パディングと境界線を含む) 質問する

tag-icon • tag-icon jquery dimensions
jQuery の要素の合計幅 (パディングと境界線を含む) 質問する

件名にあるように、jQuery を使用して、境界線とパディングを含む要素の合計幅を取得するにはどうすればよいでしょうか? jQuery のディメンション プラグインを入手し、.width()で実行すると760px-wide、10px paddingDIV は を返します760。

おそらく私が何か間違っているのでしょうが、要素が として現れ780 pixels wide、Firebug では要素が存在すると表示されるものの10px padding、呼び出しても.width()760 しか返されない場合、その理由を理解するのは難しいでしょう。

ご提案があればよろしくお願いします。

ベストアンサー1

[アップデート]

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

さて、日本語正しくは、jQueryには機能がある外側の幅そして外側の高さこれにはデフォルトでborderと が含まれておりpadding、margin関数の最初の引数がtrue

[元の回答]

このwidthメソッドはdimensionsプラグインを必要としなくなりました。jQuery Core

width必要なのは、特定のdivのパディング、マージン、境界線の幅の値を取得し、メソッドの結果に追加することです。

このようなもの：

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からパディングやマージンの値を変更しても、常に正しい計算値が得られます。

おすすめ記事