- 締切済み
スタイルシートを外部JavaScriptで制御したいのですが・・・。
HP内に設定している <td style="background-image: url(○○.jpg); > の画像を、外部JavaScriptで月毎に変更する、よい方法はないでしょうか。 因みに、このHPは下記の記述の外部JavaScriptをもっています。 var today = new Date(); document.write(today.getMonth()+1, "月"); document.write(today.getDate(), "日 ("); どなたか、ご教示ください。
- oriduru1
- お礼率100% (4/4)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
No.1です. tdが一箇所なのか、たくさんあるのか、jpgはどんな名称なのかなど不明な点がおおいので、適当なサンプルにはならないと思いますが・・・ （ついでに、tdの内容を変更する例も。変更ボタンを押すと変更するように してあります。ロード時に実行するにはonloadなどで指定すれば良い。） pipiさんの例だとHTML内に記述する方式なので、外部スクリプトにしにくいでしょうから、head間にまとめておく方式にしてあります。 （そのまま外部スクリプトにできます） <html> <head> <style type="text/css"> tr {height:100px;} td {width:200px} </style> <script type="text/javascript"> function hoge() { // ↓画像アドレスを,区切りで列挙 var imgadd="jan.jpg,feb.jpg,mar.jpg,apr.jpg,...".split(','); //先読みしないと表示されないブラウザがあるみたいなので… var testimg=[]; for (var i=0; i<imgadd.length; i++){ testimg[i]=new Image(); testimg[i].src=imgadd[i]; } with (document.getElementById('fuga').style){ fontWeight='bold'; fontSize='180%'; backgroundImage='url('+ imgadd[(new Date).getMonth()] + ')'; } document.getElementById('fuga').innerHTML='CHANGE!'; } </script> </head> <body> <table border=1> <tr><td>1</td><td>2</td></tr> <tr><td id="fuga" style="background-image: url(○○.jpg);" >test</td> <td>4</td> <tr><td>5</td><td>6</td></tr> </table> <p><input type="button" value="変更" onclick="hoge()"> </body> </html>
<script type="text/javascript"> document.write('<td style="background-image: url(まるまる'+((new Date).getMonth()+1)+'.gif)">'); </script>
お礼
ありがとうございます。 何とかなりそうな気がしてきました。 さっそく、組み込んでみたいと思います。
- fujillin
- ベストアンサー率61% (1594/2576)
月別にイメージのURLを用意しておいて、today.getMonth()で月を判定して、対象とするオブジェクト（td）に対して Element.style.backgroundImage= でイメージのURLを指定してあげればよいのでは？ ↑のElementには対象となるオブジェクトを指定しておく必要があります。 指定にはDOMを利用すればよろしいかと… （document.getElementById()など）
お礼
早速の回答ありがとうございます。 ただ、自分がHTMLによるHP作りをやっと修得したレベルなので、折角いただいた回答の意味が理解できないでいます。 関係の辞典もあれこれ探ってみましたが、具体的なプログラムのイメージも全く浮かんできません。・・・すみません。 もし差し支えなければ、もう少し具体をお示しいただけるとありがたいのですが・・・。なにぶん初級レベルなので・・・。
お礼
丁寧具体な回答をいただき、恐縮です。 列の一つひとつの意味を、しっかり学びとりながら、十分に活用させていただこうと思います。ありがとうございました。 お手数をおかけいたしました。