締切済み

スタイルシートを外部JavaScriptで制御したいのですが・・・。

2008/12/19 13:08

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)

2008/12/19 23:16 回答No.3

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>

質問者

お礼 2008/12/21 00:30

丁寧具体な回答をいただき、恐縮です。列の一つひとつの意味を、しっかり学びとりながら、十分に活用させていただこうと思います。ありがとうございました。お手数をおかけいたしました。

noname#84373

2008/12/19 20:55 回答No.2

質問者

お礼 2008/12/19 21:53

ありがとうございます。何とかなりそうな気がしてきました。さっそく、組み込んでみたいと思います。

fujillin
ベストアンサー率61% (1594/2576)

2008/12/19 16:17 回答No.1

月別にイメージのURLを用意しておいて、today.getMonth()で月を判定して、対象とするオブジェクト（td）に対して　Element.style.backgroundImage= でイメージのURLを指定してあげればよいのでは？ ↑のElementには対象となるオブジェクトを指定しておく必要があります。指定にはDOMを利用すればよろしいかと…　（document.getElementById()など）

質問者

お礼 2008/12/19 20:32

早速の回答ありがとうございます。ただ、自分がHTMLによるHP作りをやっと修得したレベルなので、折角いただいた回答の意味が理解できないでいます。関係の辞典もあれこれ探ってみましたが、具体的なプログラムのイメージも全く浮かんできません。・・・すみません。もし差し支えなければ、もう少し具体をお示しいただけるとありがたいのですが・・・。なにぶん初級レベルなので・・・。

関連するQ&A

javascriptで質問
javascript初心者です。日付で自動的に変わるようなメニューが作りたいのですがもっとシンプルに簡潔にできますか？また、開いているページのタブの色を他と変えたいのですができますか？以下ソース↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>スクリプトテスト</title> <style type="text/css"> .menu li{ list-style-type:none; float:left; border:solid 1px #666666; } .menu li a{ padding:5px; background:#eeeeee; display:block; } .menu li a:hover{ background:#ffffff; } </style> <script type="text/javascript">  </script> </head> <body> <ul class="menu"> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> <script type="text/javascript">  </script> </ul> </body> </html>
- 締切済み
- JavaScript
javascriptの外部ファイルにする方法
HTML内の利用箇所にそのまま下記のように日付の表示を記述しているのですが、外部ファイル化するにはどうしたらよいのでしょうか。 <script language="JavaScript">  </script> javascript初心者です。よろしくお願いいたします。
- ベストアンサー
- その他（インターネット・Webサービス）
javascriptで任意の曜日に日をプラス
javascriptで任意の曜日に日をプラスさせたいです。 ●外部 //日付取得 var nweek = new Array("日","月","火","水","木","金","土"); var now = new Date(); var nYear = now.getFullYear(); var nMonth = now.getMonth() + 1; var nDate = now.getDate(); var nweekjp = now.getDay(); //配送日計算 var now = new Date(); now.setDate(nDate+7); var yYear = now.getFullYear(); var yMonth = now.getMonth() + 1 ; var yDate = now.getDate(); var yweekjp = now.getDay(); ●実行タグ <script type="text/javascript">document.write(""+yYear+"/"+yMonth+"/"+yDate+" ");</script><script type="text/javascript">document.write(""+nweek[yweekjp]+"曜日 ");</script> で、配送までの日付を取得させているのですが、土日の配送が月曜日になるため、土曜日の場合は、日付を2日追加、日曜日の場合は、1日追加としたいのですが、どうすればいいでしょうか。調べても日付取得方法ばかりで、困っています。ご存知でしたら教えて下さい。お願いします。
- ベストアンサー
- JavaScript
外部javascript
javascriptを外部に設置しホームページに呼び出す際にはどのようにすればよろしいでしょうか var imglist = new Array( "http://www.geocities.jp/***img/hasimoto1.JPG", "http://www.geocities.jp/***/img/hasimoto10.jpg", "http://www.geocities.jp/***/img/hasimoto11.jpg", "http://www.geocities.jp/***/img/hasimoto12.jpg", "http://www.geocities.jp/***/img/hasimoto14.jpg", "http://www.geocities.jp/***/img/hasimoto20.jpg", "http://www.geocities.jp/***/img/hasimoto23.jpg", "http://www.geocities.jp/***/img/hasimoto25.jpg" ); var selectnum = Math.floor((Math.random() * 100)) % imglist.length; var output = "<img src=" + imglist[selectnum] + ">"; document.write(output); これを所定の位置に呼び出したのですがどのようにすればいいですか？
- ベストアンサー
- JavaScript
始めまして、23歳の事務系OLです。
始めまして、23歳の事務系OLです。最近HPの作成やデザインを行っているのですが、モバイルについて質問です（＞＜）普通のPC系のページであれば、「三日前～今日まで」の表示は下記のようなやり方で大丈夫だと思うのですが、モバイルサイトの場合でもそのようにスクリプトで日付を表示できるのでしょうか？埋め込んでみたのですが、うまく表示されませんでした。やり方はどんなでも構わないのですが、もしわかる方いたら教えた頂けると助かります＾＾よろしくお願いいたします。 <script language="JavaScript" type="text/javascript">  </script> ～ <script language="JavaScript" type="text/javascript">  </script> まで
- 締切済み
- JavaScript
javascript で　undefinedと表示されます
全ての変数、配列に alert(typeof variable); を試しましたが　undefinedが見つかりません。 function a{ var lastdayArray = new Array ('','31','28','31','30','31','30','31','31','30','31','30','31'); var weekArray = new Array ('日','月','火','水','木','金','土'); var a = new Date(); var b = new Date(); var mymonth = a.getMonth()+1; var nextmonth =mymonth +1 ; var myyear = a.getYear()+1; 　 var today = a.getDate(); var maxbox = 36; var sday = a.setDate(1); var nday = b.setDate(1); var nmonth = b.setMonth(mymonth); var nwday = b.getDay(); var fwk = a.getDay(); var nfday = 6 - nwday; var fline = 6 - fwk; var nextlsday = lastdayArray[mymonth]; var lsbox = (fwk + lastdayArray[mymonth]) +1; var monthArray = new Array(mymonth,nextmonth); var monthflg = new Array(fwk,nfday); var nextflg = new Array(fline,nwday); var s_no0 = 1; 　 var s_no1 = 1; //数値代入変数　　　　　　 var s_no2 = 1; var s_no3 = 0; var s_no4 = 0; var s_no5 = 0; var s_no6 = 0; var s_no7 = 0; var s_no8 = 0; var schedule_no = new Array(s_no0,s_no1,s_no2,s_no3,s_no4,s_no5,s_no6,s_no7,s_no8); var s_str0 = 'a'; var s_str1 = 'a'; //文字列代入変数 var s_str2 = 'a'; var s_str3 = 'a'; var s_str4 = 'a'; var s_str5 = 'aa'; var s_str6 = 'a'; var s_str7 = 'a'; var s_str8 = 'a'; var schedule_str = new Array(s_str0,s_str1,s_str2,s_str3,s_str4,s_str5,s_str6,s_str7,s_str8); for(var x = 0; x < 2; x++){ daycount = 0; document.write(monthArray[x] + '月の予定'); if(nmonth == 12){nmonth = 0;} document.write('<table width="73%" height="337" border="1" cellpadding="1" cellspacing="1">'); //曜日出力 document.write('<tr>'); for(var l = 0 ; l <= 6; l ++){ if(l == 0){ weekArray[l] = (weekArray[l].fontcolor('#ff1493').fontsize(4)); } else if(l == 6){ weekArray[l] = (weekArray[l].fontcolor('#87ceeb').fontsize(4)); } document.write('<td>' + weekArray[l] +'</td>');} document.write('</tr>'); //曜日を判定しテーブル出力 document.write('<tr>'); //空ボックス出力 if((monthflg[x]) != 6 ){ for(var k = 0; k < (monthflg[x]); k++){ document.write('<td>' + ' ' +'</td>'); } } if((monthflg[x]) == 0){ for(var y = 0; y < 6 ; y++){ document.write('<td>' + ' ' +'</td>'); } if((schedule_no[y]) === daycount){ daycount ++; document.write('<td>' + daycount + schedule_str[y] +'</td>'); } else { daycount ++; document.write('<td>' + daycount +'</td>'); } } else{ //空ボックスの数～土曜日まで出力 for(var m =0 ; m <= nextflg[x]; m++){ if((schedule_no[m]) === daycount){ daycount ++; document.write('<td>' + daycount + schedule_str[m] +'</td>'); } else { daycount ++; document.write('<td>' + daycount +'</td>'); } } } document.write('</tr>'); //行出力 for(var i =0 ; i < 4; i++){ document.write('<tr>'); //列出力 for(var j =0 ; j < 7; j++){ if(daycount < lastdayArray[monthArray[x]]){ daycount ++; document.write('<td>' + daycount +'</td>'); } else{ document.write('<td>' + ' ' +'</td>'); } } document.write('</tr>'); } //最終行出力 if(daycount < lastdayArray[monthArray[x]]){ document.write('<tr>'); for(var p =0 ; p < 7 ; p++){ if(daycount < lastdayArray[monthArray[x]]){ if((schedule_no[p]) === daycount){ daycount ++; document.write('<td>' + daycount + schedule_str[p] +'</td>'); } else { daycount ++; document.write('<td>' + daycount +'</td>'); } } else{ document.write('<td>' + ' ' +'</td>'); } } document.write('</tr>'); } document.write('</table>'); } }
- 締切済み
- その他（インターネット・Webサービス）
外部javascriptファイルをjavascriptから動的に呼び出したい
呼び出し元のURLによって動作を変えたいJAVASCRIPTがあります。普段外部のJAVASCRIPTを呼び出すときはよくこうするのですが <script type="text/javascript" src="js.php?key=url"></script> これでは「key=url」が固定になってしまいます。そこで下記のように <script> var commentname=document.URL; var str=encodeURIComponent(commentname); document.write('<script type="text/javascript" src="read.php?key=',str,'"><\/script>'); </script> document.writeを使って無理やり外部Javascriptファイルの呼び出しスクリプトを書いているのですが、この書き方はどうもエレガントさにかけるというか、いまいち気に入りません。もっとほかに良い方法がある気がするのですが、調べてもわかりませんでした。おわかりになる方がいらっしゃったらご教示頂けないでしょうか。
- ベストアンサー
- JavaScript
スクリプトが分からなくて・・・
スクリプトが分からなくて・・・こんにちは。 23歳、事務系のOLです。いま、HPの作成を行っているのですが、スクリプトがいまいちよくわからなくて＞＜ 3日前の日付を常に表示するスクリプトが欲しいのですが、どのように作るのでしょうか？下記のようにやってみたのですが、これだと月が替わって「1日」になると「－2日」となってしまいます。良いやり方はないでしょうか；； <script language="JavaScript" type="text/javascript">  </script>
- 締切済み
- JavaScript
こんにちは、23歳、事務系のOLです。
こんにちは、23歳、事務系のOLです。いま、HPの作成を行っているのですが、スクリプトがいまいちよくわからなくて＞＜ 3日前の日付を常に表示するスクリプトが欲しいのですが、どのように作るのでしょうか？下記のようにやってみたのですが、これだと月が替わって「1日」になると「－2日」となってしまいます。良いやり方はないでしょうか；； <script language="JavaScript" type="text/javascript">  </script>
- 締切済み
- JavaScript
JavaScriptでdocument.fileCreatedDate
JavaScriptでdocument.fileCreatedDateを使おうとして <script type="text/javascript">  </script> のようなスクリプトを作ったんですが表示がおかしくなります。 Google chromeでも正常に表示できるようにしたいです。よろしくおねがいします。
- ベストアンサー
- ホームページ作成ソフト

スタイルシートを外部JavaScriptで制御したいのですが・・・。