0

通常の DIV 内にある画像があります。それを DIV b としましょう。DIV b の上には別の DIV があり、これを DIV a と呼びます。DIV a にはオーバーフローがあります: 非表示です。コードは次のとおりです。

<div id="a">
  <div id="b">
    <img id="image" src="http://fgjdfgsjh.com/images/hghgajfhsd.jpg" height="186" width="900">
  </div>
</div>

... ここで、この例の重要な CSS をいくつか示します。

#a {overflow: hidden; height: 128px;}

...そして最後にいくつかの .js:

<script>
  $(document).ready(function(){
     var test = $('#image').attr('height');
     alert(test);
  });
</script>

ご覧のとおり、画像にはすでに高さ属性が設定されています。私のスクリプト (jQuery) はその情報を取得する必要がありますが、$('#image').attr('height') を使用すると、スクリプトは数値 128 を提供します。これは、 #a 要素を含む要素の高さです。 HTML で属性として設定されている 186 である、イメージの予想される高さではなく、#b とイメージ。

これは Chrome で発生しています。Firefox は画像の正しい高さを取得できます (128 ではなく 186)。

Chromeで画像の実際の元の高さを取得するにはどうすればよいですか? プレーンでシンプルなjQueryでそれを行うことは可能ですか、それとも何らかのギミックを行う必要がありますか(別のオブジェクトに画像をリロードして元の高さを確認するなど)?

4

2 に答える 2

1

CSS は通常、height属性よりも優先されます。jQuery を使用するには、以下を使用し.cssます。

$('#image').css('height');

ここに戻り186pxます。のみが必要な場合は、次186を使用します.height。

$("#image").height();
于 2013-09-20T12:15:45.027 に答える
0

この問題に関して、Chrome の動作は不安定です。@Mooseman から提供されたコードを試してみましたが、ページを何度も更新すると、スクリプトが 128 ピクセルをポップすることもあれば、186 ピクセルをポップすることもありました。

これを一貫して行う唯一の方法は、画像を動的にロードすることです。私はここからコードを借りました：「動的画像の幅と高さを取得する」。

最後に、コードは次のとおりです。

  $('<img/>').attr('src', $('#image').attr('src')).load(function() {
    // Then just get the resulting loaded image height by using:
    var myHeight = this.height;
  }
于 2013-09-20T13:05:17.270 に答える