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">
みたいにしておけば、大丈夫。
関連記事
-
-
CKEditor5(WYSIWYGエディタ)に画像アップロード機能を追加する方法
CKEditor5(ウィジウィグエディタ)に画像アップロード機能を追加したい。公 ...
-
-
バニラJS対応(jQuery非依存)の画像スライダー系プラグイン「Flickity」の利用方法
画像スライダーを設置する場合「slick」プラグインを利用することが多い。ただ、 ...
-
-
JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法
サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...
-
-
Lightboxで画像拡大時にダウンロードリンクを設置する方法
Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...
-
-
バニラJS対応(jQuery非依存)の画像遅延読み込みプラグイン「echo.js」の利用方法
あるサイトをブラウザの開発者ツールで見ていると「echo.js」と聞いたことの無 ...