勉強したことのメモ

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.uploadでリアルタイムプレビュー
jQuery.uploadでリアルタイムプレビュー

やりたい事は、 ・<input type="file">で画像を選択 ...

imgタグのsrc属性のURLにPHPでタイムスタンプを付与しキャッシュ対策する方法
imgタグのsrc属性のURLにPHPでタイムスタンプを付与しキャッシュ対策する方法

imgタグで画像を表示する際、画像を書き換えても同じものが表示されるというケース ...

summernoteにギャラリーから画像を挿入する機能を追加する方法
summernoteにギャラリーから画像を挿入する機能を追加する方法

summernoteの画像機能はデフォルトだと「画像ファイルを選ぶ」「URLから ...

MySQLとPHPの「image-comparator」ライブラリを使用して類似画像検索を実装する方法
MySQLとPHPの「image-comparator」ライブラリを使用して類似画像検索を実装する方法

先日PHPで画像を比較して類似度を算出する「image-comparator」ラ ...

PHPでスマホ(iPhone / Android)に画像をダウンロードさせる方法とダウンロード後の保存場所について
PHPでスマホ(iPhone / Android)に画像をダウンロードさせる方法とダウンロード後の保存場所について

PHPで作ったシステムにスマホ(iPhone / Android)でアクセスし何 ...