中途半端を極める

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]複数の要素の高さを揃えるjavascript利用時にうまく動作しない時の対処法

「EqualHeight」や「flatheights」など複数の要素の高さを揃えるjavascriptを使用すると、SafariとGoogle Chromeではうまく動作しない場合があります。 うまく …

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

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

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

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

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

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

Google Maps API V2であまりソースを変更せずV3へ移行する方法

注: Google Maps JavaScript API バージョン 2(V2)は、2010 年 5 月 19 日に正式にサポートが終了しました。V2 の廃止スケジュールは 2013 年 5 月 1 …