web-dev-qa-db-ja.com

jQueryの要素の合計幅（パディングとボーダーを含む）

主題のように、jQueryを使用して、境界線やパディングを含む要素の全幅を取得するにはどうすればよいですか？ jQueryディメンションプラグインを取得し、760px幅の10pxパディングDIVで.width（）を実行すると760が返されます。

おそらく何か間違ったことをしているかもしれませんが、私の要素が780ピクセル幅で現れ、Firebugが10pxのパディングがあることを教えてくれますが、.width（）を呼び出すと760しか得られない場合、どのように見るのが難しいでしょう。

提案をありがとう。

jquerydimensions
162
tags2k

[更新]

元の回答はjQuery 1.3より前に記述されていたものであり、その時点で存在していた関数は、全体の幅を計算するのに十分ではありませんでした。

JP が正しく述べられているように、jQueryにはborderおよびpaddingを含む outerWidth および outerHeight という関数があります。デフォルト、および関数の最初の引数がmarginの場合はtrueも

[元の答え]

widthメソッドはjQuery Coreに追加されたため、dimensionsプラグインは不要になりました

あなたがする必要があるのは、その特定の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からパディングまたはマージンの値を変更しても、常に正しい計算値を取得できます。

216
Andreas Grech

この答えにつまずいた人は誰でも、jQuery now（> = 1.3）にouterHeight/outerWidthが含まれていることに注意してください。

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

マージンも含めるには、単にtrueを渡します。

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

簡単にするために、上記の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;
}
2
bladnman

jQueryの最新バージョンではouterWidthが壊れているようです。

不一致は次の場合に発生します

外側のdivはフロートされ、内側のdivには幅が設定され（外側のdivよりも小さい）、内側のdivにはstyle = "margin：auto"が設定されます

2
Booker

同じブラウザは境界線幅の文字列を返す場合があります。この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"));
0
Cherven
$(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>
0
user1798002