勉強したことのメモ

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

  関連記事

サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法

画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...

「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法

「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...

Chart.jsで描写したグラフを画像としてダウンロードさせる方法

サイト内にChart.jsでグラフを描写し、ボタンやリンクをクリックすることで当 ...

Ajaxでプラグイン無しのファイルアップロード方法

画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...

ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)

あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミン ...