- ベストアンサー
時間帯によってclass名を変更したい
- 時間帯ごとに特定のボックスの背景色を変更する方法を教えてください。
- スタイルシートで色を設定し、html内のclassの値を変更することで、時間帯に応じた背景色を表示することができます。
- 具体的なソースコードをご提供したいと思います。JavaScriptを使用してclass名を変更し、時間帯に応じた背景色を適用することができます。
- riopara
- お礼率94% (49/52)
- JavaScript
- 回答数3
- ありがとう数7
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ほとんど他の方の流用してしまいましたが、こうしてください。 <html> <SCRIPT> window.onload=function(){ divbgchange() } function divbgchange() { dd = new Date(); hh = dd.getHours(); var tag=document.getElementById("hoge"); if (hh <= 24) tag.className="bg3" if (hh <= 18) tag.className="bg2" if (hh <= 10) tag.className="bg1" if (hh <= 7) tag.className="bg3" } </SCRIPT> <style> .bg1{background-color: #000000;color:#ff0000;} .bg2{background-color: #ff0000;color:#00ffff;} .bg3{background-color: #ffffff;color:#0000ff;} </style> </head> <body> <div id="hoge"> あいうえお </div> </body> </html> もし、idをどうしても振りたくないというのであれば、ちょっと 面倒ですが、別のやり方もあります。
その他の回答 (2)
- myeyesonly
- ベストアンサー率36% (3818/10368)
<html> <head> <!-- 再読み込み時間を秒で指定↓ -> <META HTTP-EQUIV="Refresh" CONTENT="600"> <SCRIPT> function divtag() { dd = new Date(); /* 日付時刻データを dd に取り込みます */ hh = dd.getHours(); /* hh に現在の時間を入れます */ tagu = ""; if (hh <= 24) {tagu = "<div class=bg3>";} /* 0～7時まで */ if (hh <= 18) {tagu = "<div class=bg1>";} /* 8～10時まで */ if (hh <= 10) {tagu = "<div class=bg2>";} /* 11～18時まで */ if (hh <= 7) {tagu = "<div class=bg3>";} /* 19～24時まで */ document.write(tagu); } </SCRIPT> <style> .bg1 {background-color: #000000;} .bg2 {background-color: #ff0000;} .bg3 {background-color: #ffffff;} </style> </head> <body> <script> divtag(); </script> あいうえお </div> </body> </html>
お礼
動作的には希望通りだったのですが、html構文が気になったので、 今回はNO.3様のを使わせていただくことにしました。 ありがとうございました。
補足
有難うございます。 NO.1様の回答への補足でも同じ事を書いたのですが、 この方法だと先頭の<div>がhtmlとして書かれていないので、 htmlの構文チェックにかけると<div>が足りないせいであちこちに構文エラーが出ます。 なんらかの理由でjavascriptが動作しなかった場合は<div>が足りないためレイアウトが崩れてしまうので、 動作しなかった場合は色が変らないだけで、htmlとしては問題のないようにしたいのですが、他に方法はないでしょうか。 javascriptの知識がないため無理なことを言っていたらすみません。汗
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"> div {border:1px #000000 solid;} .bg1 {background-color: #000000;} .bg2 {background-color: #ff0000;} .bg3 {background-color: #ffffff;} </style> </head> <body> <script type="text/javascript"> <!-- var day = new Date(); var hour = day.getHours(); if (hour>=7 && hour<10){ document.write("<div class='bg1'>"); } else if (hour>=10 && hour<18){ document.write("<div class='bg2'>"); } else { document.write("<div class='bg3'>"); } //--> </script> このBOX内の色を時間帯毎に変更したい </div> </body> </html> こんな感じに成ると思います。
お礼
動作的には希望通りだったのですが、html構文が気になったので、 今回はNO.3様のを使わせていただくことにしました。 ありがとうございました。
補足
有難うございます。 せっかく教えていただいたのですが、この方法だと先頭の<div>がhtmlとして書かれていないので、 htmlの構文チェックにかけると<div>が足りないせいであちこちに構文エラーが出ます。 （もちろん実際にはscriptで<div>が書き出されるので問題はないのですが） class="○○" の「○○」の部分だけを変更する事は無理なのでしょうか。
お礼
希望通りに出来ました！！ これを利用したい場所はページに1ヶ所しかないため id でも全く問題ありません。 あつかましく丸投げな要望に回答いただき本当に有難うございました。