jQueryでの要素の合計幅(パディングとボーダーを含む)


164

サブジェクトのように、jQueryを使用して、境界線とパディングを含む要素の合計幅をどのように取得できますか?私はjQueryの寸法は、プラグイン、および実行しているんだ.width()私に760px-wide10px paddingDIV戻ります760

おそらく私は何か間違ったことをしているかもしれませんが、私の要素がそれ自体として現れ780 pixels wide、Firebugがそれが存在10px paddingすることを私に告げたが、呼び出し.width()は760しか与えない場合、私はその方法を見るのが難しいでしょう。

提案をありがとう。

回答:


216

[更新]

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

さて、とJPが正しくjQueryの機能を持っている、と述べouterWidthのouterHeight含めるborderpadding、デフォルトでは、また、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からパディングまたはマージンの値を変更した場合でも、常に正しい計算値が得られます。


3
一般的に、私は自分で計算するよりもjQueryを信じたいと思います。問題は、「box-sizing:border-box」の場合、width()関数が実際に何をするかを指定しないことです。テストしたところ、パディングなどを除いた内側の幅が返されました。これは正しい場合とそうでない場合があります。異なる人々は異なるものを期待するかもしれません。したがって、上記のコードサンプルは実際には機能しますが、最も信頼できる方法ではない可能性があります。他のいくつかの回答に示されているように、代わりにouterWidth()関数を使用することをお勧めします。それは少なくともそれがドキュメントで想定されていることを約束します。
ヤンZich

4
この回答を書いたとき、outerWidth / outerHeight関数は存在しませんでした。
Andreas Grech、

誰かがまだ使用している場合は、私の古いコードについて簡単にコメントしてください。parseIntsがに変更することができ+、コードをより簡潔にするためにオペレータ。それで、他のparseInt(theDiv.css("padding-left"), 10)ようになるかもしれません+theDiv.css("padding-left")...
Andreas Grech '19 / 06/19

182

この答えを偶然見つけた人は、jQueryが(> = 1.3)にouterHeight/ outerWidthパディング/ボーダーを含む幅を取得する/ 関数を持っていることに注意してください。

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

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

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

3
//幅+パディング+ボーダーを返し、// 2番目のコメントは幅+パディング+ボーダーに+余白を返し変更:私は、編集機能を持っていないが、私はへの最初のコメントを変更します
CtrlDot

2

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

不一致は、

外側のdivはフローティング、内側のdivの幅は(外側のdivよりも小さい)設定されています。内側のdivはstyle = "margin:auto"です。


2

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

0

同じブラウザがボーダー幅の文字列を返す可能性があります。この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
$(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>

回答を投稿していただきありがとうございます。必ずお読みくださいセルフプロモーションに関するFAQをよく。また、独自のサイト/製品にリンクするたびに免責事項を投稿する必要があることにも注意してください。
Andrew Barber
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.