- ベストアンサー
javascriptで画像を表示する
javascriptで画像を表示した際に、表示したimgにCSSのidを付与したいのですが、以下のようにしても画像にidはつきませんでした。 document.write("<img src='images/image.jpg' id='example'>"); 一部の画像のみにスタイルを適用したいので、画像それぞれに異なるidを与えたいのですが、javascriptで表示させる場合のやり方がわかりませんでした。 どうやってidを割り当てるのか教えてください。 よろしくお願いいたします。
- midorinodonchan
- お礼率97% (101/104)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
横入り失礼します。 >><head>内で読み出すのがまずいのでしょうか？ まずいかも知れません。 document.writeとは、そのプログラムが実行された時にその場に出力する命令ですので、それだとimgが生成されるタイミングがあやしいです。 document.createElement()などの命令を使えば（DOM操作といいます）可能です。 例としては、そのJavaScript内で onload = function(){ var img = document.createElement("img"); img.src = "images/image.jpg"; img.id = "example"; document.getElementsByTagName("body")[0].appendChild(img); } こうすればおｋです。 onload時に実行されるため、head内にscriptがあっても問題ありません。 DOM操作を行う場合は、既にDOMが構築されていなければならないのでonload時に実行する必要があります。 DOM操作とは簡単にいえばHTML要素を扱うことです。 上記プログラムを解説すると document.createElementで要素を作成し、imgという変数に代入。 img.srcで作成したimg要素にsrc属性を追加。 img.idで作成したimg要素にid属性を追加。 そして最後に作成したimg属性をbody要素の子供として追加する です。 createElementしても、appendChildしないと表示されませんのでご注意下さい。 JavaScriptはDOM操作ができるととても自由に扱えるようになり、便利です。 DOM操作については勉強されることをおすすめします。 なお、基本的にdocument.writeは使わない方が良いと思います。 経験則ですが。
その他の回答 (2)
- kamepanman
- ベストアンサー率43% (19/44)
inuchokinさんが、よい方法を答えてくれているので、私も賛成です。 蛇足ですが、DOMを覚える前にjQueryを覚える方が、感覚が掴みやすいと思います。
お礼
回答ありがとうございます。 jQueryは全く知識ないので勉強してみます。
- LOHA
- ベストアンサー率52% (203/388)
＞画像それぞれに異なるidを与えたい 方法は間違っていないはずです。 しかしながら、idに指定する値は一つのHTML内で重複してはいけない、というルールがあるので、もしJavaScriptで動的に生成する場合は、idを変える必要があります。 例えば、以下のように数値を付加する方法が考えられます。 for (var i = 0; i < ...; ++i) document.write("<img src='...' alt='' id='example" + i + "'>"); ＃余談ですが、個人的にはdocument.writeは使わずに、innerHTMLや、DOMで操作するのがオススメです。
お礼
早速のご回答ありがとうございます。 画像は1枚だけなのでidは被っていません。 ちなみにJSは<head>内で以下のように外部ファイルを読み出しています。 <head> <script src="http://example.jp/js/example.js" type="text/javascript"></script> </head> <head>内で読み出すのがまずいのでしょうか？ document.write以外の方法ですが、自分が初心者すぎてよくわからないので、これらも視野に入れて調べてみます。
お礼
ご丁寧に回答ありがとうございました。 上記方法試してみたいと思います。