web-dev-qa-db-ja.com

outerHeight（true）が間違った値を与える

マージンやパディングを含むコンテナ要素の高さを求めています。

Chrome開発ツールの要素にカーソルを合わせると、探している値が表示されますが、jQueryを使用すると$('element').outerHeight(true)になり、はるかに小さな値が表示されます。

要素にはjQueryカルーセルが含まれています（position:relativeとアイテムposition: absolute）、それはそれと何か関係があるのでしょうか？

前もって感謝します

jquerypositioningdimensions
22
Viktor

私はこの問題を何度か経験しており、プラグインや手に負えないsetTimeout関数を使用せずにブラウザのonLoadイベントにフックを使用するのが最善の解決策です。 jQueryでは、次のように行われます。

$(window).load(function(){ ...outerHeight logic goes here... });

これは、標準の$(function(){ ...code... });から完全に分離することができるため、他のすべての適切に機能するコードは、ページ上のすべての要素が読み込まれるまで待つ必要がありません。

なぜこれが最初に起こるのか：
ChromeのレンダリングアルゴリズムはFirefoxとは異なります。これにより、ページ上のすべての要素が完全に描画/表示され、jQueryが高さを選択および取得できるようになる前に、onLoadイベントがトリガーされます。 setTimeout()はほとんどの場合機能しますが、本質的に非常に盲目なものへの依存関係を作りたくないのです。将来的には、Chromeのこの「奇妙なこと」が誰にもわかるでしょう。直せ！ :)

35
Lasha

私も同じ問題を抱えていました。 Chrome --setTimeoutを使用して少し待つことで）で正しい高さを取得します。

    setTimeout ( function () {
        var ht = $('.my-class').outerHeight( true );
    }, 1);

お役に立てば幸いです。

9
Matt Reilly

同じ問題に遭遇しました。

Console.log経由のFirefox outerheight：430 Chrome console.log経由のouterheight：477

実際の外側の高さ（firebugレイアウト）：820

Firebugを開くか、ステータスバーを削除すると、console.logに正しい値（820）が設定されます（そのため、コードは正常に機能します）。

問題は画像によるものでした。ドキュメントの準備ができてそれを実行している場合でも、すべてのイメージがまだロードされていない可能性があるため、計算は正しくありません。

Desandroのプラグインを使用していますが、問題が解決しました。 https://github.com/desandro/imagesloaded

5
Zoran P.

@Matt Reillyと@Lashaの両方の回答を組み合わせたものが、私にとっては正しく機能しました。

_$(window).load(function() {
    setTimeout(function() {
        // all the logic in here
    }, 1);
});
_

以前はコードを$(document).ready(function(){...});に配置していましたが、時々不安定になり、上記が完全に機能します。

3
ctf0

必要かもしれないと思う

.outerHeight({margin: true});

ここ に従って：

マージンを含めるには、マージンをtrueに設定してオプションマップを渡します。

3
Elliot Bonneville

これらのソリューションをひとつひとつ試しました。最後にインスペクターを開いて、私のpにまだmargin-top。いつものようにノーマライズ...

0
corysimmons

ドキュメントによると 、outerHeightは次の場合に正確であるとは限りません。

  • ページがズームされている
  • 要素またはその親は非表示です
0
StoriKnow

少しハック。次のように、コードをロード、スクロール、サイズ変更する関数のjquery内に配置します。

$(window).on('load scroll resize', function(){
    //outerHeight code
});
0
DarkNRahlKarl

内部の非表示要素、固定要素、および絶対要素は、outerHeightの使用を適切に考慮していません。

ScrollHeightプロパティを試してください：

$('element').prop('scrollHeight')
0
Rob

ウィンドウが読み込まれ、ドキュメントの準備ができていて、フロートを考慮してもまだこの問題が発生する場合は、同じIDの要素を探すことを検討してください。 jQueryセレクターで正しい要素を取得していることを確認してください。まったく同じIDを持つ別の要素がdomにあったのを忘れました。 jQueryを使用して、確認する背景色を変更することを検討してください。

0
user3338098