web-dev-qa-db-ja.com

jQuery 1.8の外側の高さ/幅が機能しない

私は多くの場所でouterHeightとouterWidthを使用しました。今、jQuery 1.8がリリースされた後、オブジェクトのサイズではなく、オブジェクトの戻りによって引き起こされる多くの問題に遭遇しました。

例えば：

_$('#stackoverflowdiv').Height()      // returns 100 px
$('#stackoverflowdiv').outerHeight() // returns "stackoverflowdiv" div
_

これを修正するために私が見つけた唯一のことは、次のように関数で「true/false」を使用することでしたが、標準のwidth()およびheight()関数と同じ結果が得られます。

_$('#stackoverflowdiv').outerHeight(true)  //  returns 100 px
$('#stackoverflowdiv').outerHeight(false) //  returns 100 px
_

要素の高さ/幅とそのマージンを取得するためにこれがこれ以上機能しない理由を誰かが知っていますか？.

編集：私はcontents()関数を使用してiframe内の要素を選択しているため、これが原因であると信じ始めました。デモを作ってみます。

jqueryheightjquery-1.8
28
gotqn

これは実際には ここ について読むことができるjQueryの既知のバグです。

パラメーターなしでそれを経験していて、修正によりパラメーターが設定されます（デフォルトの{false}があるにもかかわらず）が、trueパラメーターを1に、falseを0に置き換えることにより、Barlasのフィドルを壊すことができました。あなたがそうなら、それをしなさい。

これを行う：

alert(jQuery(this).outerHeight(false));

これを行わないでください：

alert(jQuery(this).outerHeight());
alert(jQuery(this).outerHeight(0));
33
Coomie

.outerHeight(1);ではなく.outerHeight(true);を実行した場合にのみ機能します

5
Tony Knibb

最善の修正は、trueまたはfalseを呼び出すときに、ブールパラメータouterHeightまたはouterWidthを渡すことです。

しかし..

万が一、outerHeightを呼び出すファイルにアクセスできない場合や、ファイル内のすべてのouterHeight関数を編集したくない場合は、以下のようにjQuery outerHeight関数をオーバーライドして、常にtrueパラメータを渡すようにできます。

var oldOuterHeight =  $.fn.outerHeight;

$.fn.outerHeight = function () { 
    return oldOuterHeight.apply(this, [true]);
};
2
kiranvj

JQuery 1.8 height()、innerHeight()、outerHeight()およびouterHeight(true)は期待どおりに機能します。

[〜＃〜] demo [〜＃〜] -作業高さメソッド

上記のデモはdivを使用しています：

<div id="myDiv">My Div</div>

次のCSSの場合：

div{
    border: 1px solid blue;
    padding: 5px;
    margin: 10px;
}

このスクリプトを使用する：

var $div = $("#myDiv");
var height = $div.height();
var heightWithPadding = $div.innerHeight();
var heightWithPaddingAndBorder = $div.outerHeight();
var heightWithPaddingAndBorderAndMargin = $div.outerHeight(true);

var $result = $("#result");
$result.append("height: " + height);
$result.append("<br />height with padding: " + heightWithPadding);
$result.append("<br />height with padding and borders: " + heightWithPaddingAndBorder);
$result.append("<br />height with padding and borders and margin: " + heightWithPaddingAndBorderAndMargin);

次の結果になります。

height: 20
height with padding: 30
height with padding and borders: 32
height with padding and borders and margin: 52
2
Nope

それはうまく動作しています、あなたのhtmlとcssを見なければ私は確信が持てませんが、 この例 を検査してjQuery 1.8.0でうまく動作しているか調べることができます

ここではjsFiddleが機能しています。

jQuery：

console.log($('#stackoverflowdiv').outerHeight(false));//returns 110
console.log($('#stackoverflowdiv').outerHeight(true));//returns 130

css：

#stackoverflowdiv { 
      height:100px; 
      margin:10px 5px; 
      padding:5px; 
      border 2px solid #fff;
}​

セミコロンの使用を忘れたか、document.readyを定義してもよろしいですか？またはさらに悪いことに、marginまたはborderを定義するのを忘れましたか？

1
Barlas Apaydin