中途半端を極める

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】レスポンシブデザインにも使用できる!マウスオーバーするとメインの画像が切り替わるjQuery「ImageNavigation」

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

【javascript】チェックボックスをチェックしないとサブミットできないボタン

個人的には結構使用する動作なので紹介いたします。 プライバシーポリシーや20歳以上の確認を行うときなどに有効ですね。 残念ながらフォームのスパム対策としてはおそらく効果は無いと思われます。

HTMLで生年月日から自動で年齢を読み込む方法

HTMLで年齢を表示させる場合、毎年手動で更新している人が多いかもしれません。自分もその中の一人でした。 実際毎年手動で更新するのは面倒くさいし、数が多いと忘れてしまう場合があります。 そんなことにな …

jQueryを使ってボックス要素をランダムに表示する方法

一部の要素をランダムに表示させたいという要望があったので、調べてみたところ、よさそうなjavascriptがあったので紹介いたします。結構手軽だったので活用できるシーンは多いのではないでしょうか。

ヘッダ固定時のページ内リンクのずれを解消する方法

position:fixedを使ってヘッダを固定した場合、ページ内リンクの位置がヘッダの高さ分ずれてしまいます。どのように調整すればいいか紹介いたします。