中途半端を極める

web関連で役に立ちそうなものを紹介いたします

javascript

【javascript】高さをjQueryで取得する時Google Chrome、Safariでうまく動作しない時の対処方

投稿日:

jQueryで高さ(height)を取得する時、IEやFirefoxではうまく動作するけど、Google Chrome、Safariで動作しなくて困ったことは無いでしょうか?高さを調整するようなjavascriptを使用するとき私が毎回困ってしまいますので、自分のメモがてら紹介いたします。

1案.画像要素に高さを入れてみる

画像要素が

<img src="hoge.jpg" alt="画像" />

となっている場合、画像の高さが考慮されない場合があります。そんな時は

<img src="hoge.jpg" alt="画像" height="100" />

というように画像要素に高さを入れてあげましょう。
これだけでうまく動作することがあります。

2案.高さ関係のjQueryの読み込みをwindows.onloadに変更してみる

Google ChromeやSafariは仕様上画像等の要素を読み込む前に上記のJSが動いてしまうため、うまく動作しないことがあるようです。
そうであれば全ての要素を読み込んだ後画像を読み込めばよい話です。

$(function(){
	
});

となっている部分を

<script>
  window.onload = function() {
     
  }        
</script>

に変更してみましょう。

自分の場合、上記のどちらかで問題は解消できます。

-javascript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

【javascript】SWFObjectで配置したFlash下に、ドロップダウンメニューが隠れてしまう

jquery.droppy.jsなどのドロップダウンメニュー(プルダウンメニュー)の下にFlashを配置すると、プルダウンメニューがFlashの裏側に表示されてしまう。CSSでFlashコンテンツにz …

【javascript】レスポンシブデザインにも使用できる!マウスオーバーするとメインの画像が切り替わるjQuery「ImageNavigation」

今回はマウスオーバするとメインの画像が切り替わるjavascriptを紹介いたします。 FLASHなどではこのような動きをするものはあるのですが、jQueryではなかなかありそうでない動きですので、重 …

【Javascript】IE6でもpng画像を使えるようにする

IE6でpng画像を使うと、透明部分が灰色になって正常に表示されません。 IE6でも正常に表示させるためには「DD_belatedPNG」というライブラリを利用します。 img要素やCSSでの背景(背 …

【Javascript】div要素のブロック全体をリンクにする

ブロック要素全体をリンクにすることができるjQueryです。 要素全てリンクにしたいとき、Validator errorが出る時に使用すると有効です。

[javascript]レスポンシブデザインのWEBに使用できる!現在のウィンドウサイズの取得と判定をして処理を変更する方法

レスポンシブ対応のときウィンドウ幅でjavascriptの動きを変更したいと思ったことはないでしょうか。今回jQueryを用いてウィンドウ幅に合わせて処理を変更する方法を見つけましたので紹介いたします …