javascriptで画像を取り扱う際の注意
2024/01/12
javascriptで画像を取り扱う際に、
ちゃんと要素を指定しているのにも関わらず、
undefinedになることが多く、なんでやろ？ と
なったのでメモ。
結論としては、画像を読み込む前にjavascriptで
操作は出来ない。考えると当然だけどはまって
しまったので注意。
■例
<script>
//画像読み込み前なのでundefined
document.images["image_name"].style.display = 'none';
</script>
<img src="test.jpg" name="image_name">
<script>
//画像読み込み後なのでOK
document.images["image_name"].style.display = 'none';
</script>
または、
<script>
function test(){
document.image_name.style.display = 'none';
}
</scirpt>
<image src="test.jpg" name="image_name">
みたいにしておけば、大丈夫。
関連記事
-
-
サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法
画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...
-
-
「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法
「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...
-
-
JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法
大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...
-
-
Gif画像に再生ボタンを設置し、ユーザーの操作により再生⇔停止が行える「gifffer」ライブラリの利用方法
あるページにGif画像を設置し、当該画像が表示されても自動再生させず、再生ボタン ...
-
-
Lightboxで画像拡大時にダウンロードリンクを設置する方法
Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...