時間帯によってclass名を変更したい

解決済

質問者：riopara
質問日時：2008/01/31 20:47
回答数：3件

時間帯毎に特定のボックス内の背景色を変更したいのですが、
スタイルシートで色を設定しておいて、html内のclassの値を変更するやり方を教えて下さい。

※スタイルシートで3種類の色を設定
.bg1 {background-color:#000000;}
.bg2 {background-color:#ff0000;}
.bg3 {background-color:#ffffff;}

※時間帯は3種類
朝（7～10時）＝class="bg1"
昼（10～18時）＝class="bg2"
夜（18～翌7時）＝class="bg3"

※html内のボックスのクラス名を時間帯によって
class="bg1"
class="bg2"
class="bg3"
のように変更したい。

<div class="○○">このBOX内の色を時間帯毎に変更したい</div>

私はjavascriptの知識はなく、ヒント等から自分で書くことはできないので、
恐縮ですが具体的なソースをお願いできればありがたいです。
どうぞよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： yambejp
回答日時：2008/01/31 23:15

ほとんど他の方の流用してしまいましたが、こうしてください。

<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をどうしても振りたくないというのであれば、ちょっと
面倒ですが、別のやり方もあります。

- 0
- 件

通報する

この回答へのお礼

希望通りに出来ました！！

これを利用したい場所はページに1ヶ所しかないため id でも全く問題ありません。
あつかましく丸投げな要望に回答いただき本当に有難うございました。

通報する

お礼日時：2008/02/01 00:13

No.2

回答者： myeyesonly
回答日時：2008/01/31 22:04

<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>

この回答への補足

有難うございます。
NO.1様の回答への補足でも同じ事を書いたのですが、
この方法だと先頭の<div>がhtmlとして書かれていないので、
htmlの構文チェックにかけると<div>が足りないせいであちこちに構文エラーが出ます。

なんらかの理由でjavascriptが動作しなかった場合は<div>が足りないためレイアウトが崩れてしまうので、
動作しなかった場合は色が変らないだけで、htmlとしては問題のないようにしたいのですが、他に方法はないでしょうか。

javascriptの知識がないため無理なことを言っていたらすみません。汗

補足日時：2008/01/31 22:35

通報する

- 0
- 件

通報する

この回答へのお礼

動作的には希望通りだったのですが、html構文が気になったので、
今回はNO.3様のを使わせていただくことにしました。
ありがとうございました。

通報する

お礼日時：2008/02/01 00:15

No.1

回答者： noname#56851
回答日時：2008/01/31 21:48

<!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">

</script>
このBOX内の色を時間帯毎に変更したい
</div>
</body>
</html>

こんな感じに成ると思います。

この回答への補足

有難うございます。
せっかく教えていただいたのですが、この方法だと先頭の<div>がhtmlとして書かれていないので、
htmlの構文チェックにかけると<div>が足りないせいであちこちに構文エラーが出ます。
（もちろん実際にはscriptで<div>が書き出されるので問題はないのですが）

class="○○" の「○○」の部分だけを変更する事は無理なのでしょうか。

補足日時：2008/01/31 21:58

通報する