勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

javascriptで画像を取り扱う際の注意

   2024/01/12  JavaScript

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">

みたいにしておけば、大丈夫。

 - JavaScript

  関連記事

jQueryの画像スライダー用プラグイン「slick」の使い方

jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...

Lightboxで画像拡大時にダウンロードリンクを設置する方法

Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...

Lightboxで文字をクリックしたら画像を表示させる方法

Lightboxを使用する際、一般的に使われているのはサムネイル画像をクリックす ...

バニラJS対応(jQuery非依存)の画像遅延読み込みライブラリ「lazysizes」の利用方法

あるサイトのコーディングデータを貰った際に「lazysizes」というJavaS ...

PHPで画像を分割し並べ替えて出力したものをJavaScriptで復元する方法

ある電子書籍サイトをブラウザの開発者ツールで見てみたところ、PHPでページ画像を ...