165

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

おそらく私は何か間違ったことをしているのでしょうが、私の要素が次780 pixels wideのように表示され、Firebug がその要素があることを示している10px paddingのに、呼び出すと.width()760 しか返されない場合、どうすればよいかわかりません。

提案をありがとう。

4

6 に答える 6

219

[アップデート]

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

現在、JPが正しく述べているように、jQuery には、デフォルトで andを含む関数outerWidthとouterHeightがあり、関数の最初の引数がborderpaddingmargintrue

[元の回答]

メソッドにプラグインが追加されたためwidth、プラグインは不要になりました。dimensionsjQuery 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 からパディングまたはマージンの値を変更しても、常に正しい計算値を取得できます。

于 2008-12-08T14:30:59.040 に答える
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;
}
于 2012-09-26T21:22:01.603 に答える
2

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

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

外側の div はフロートされ、内側の div には幅が設定されています (外側の div よりも小さい) 内側の div には style="margin:auto" があります

于 2011-04-09T03:10:32.663 に答える
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"));
于 2011-08-18T16:41:52.417 に答える