全幅の要素を含むパディング、ボーダー)がマウスでクリック

StackOverflow https://stackoverflow.com/questions/349705

  •  20-08-2019
  •  | 
  •  

質問

としては、どのように一つに全幅の要素を含め、国境およびパディングは、jQuery?私のjQueryプラグインの寸法、走っています。幅()マ760px広10pxのパディング本部長を返します760.

うになっているようだが、私の要素にマニフェストとしての780ピクセル全開いているのがfirebugからある10pxのパディングとも呼びかける。幅()なければならないわけではなく760いろ見えます。

させます。

役に立ちましたか？

解決

[更新]

の答えを前に記されましたjQuery1.3の機能に存在するのに十分な独自の計算の全体の幅になります。

現在は、 J-P 正しく、jQueryの機能 outerWidth や outerHeight などの border や padding デフォルトでは、ともに margin 場合最初の引数の機能が true

【回答】

の width 法なの dimensions プラグインが追加されているの jQuery Core

必要なものんのパディング、マージンやボーダー幅値の特定の部追加の 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

他のヒント

誰も障害とは、この答えはあることに注意しなければjQuery（>=1.3） outerHeight/outerWidth 機能を取得する幅などのパディング/国境など

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

の証拠金として、パス true:

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

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

とき

この不一致が起こります

外側のdivはフローティングされ、 内側のdivは幅が設定されている（外側のdivよりも小さいです） 内側のdivのスタイルを持っている= "マージン：オート"

ただ、単純化のために私はいくつかの機能では上記のアンドレアス・グレックの偉大な答えをカプセル化。カットアンドペースト幸福のビットをしたい人のために。

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;
}

同じブラウザが返す文字列幅は、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"));

$(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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top