時間帯によってclass名を変更したい
- 時間帯ごとに特定のボックスの背景色を変更する方法を教えてください。
- スタイルシートで色を設定し、html内のclassの値を変更することで、時間帯に応じた背景色を表示することができます。
- 具体的なソースコードをご提供したいと思います。JavaScriptを使用してclass名を変更し、時間帯に応じた背景色を適用することができます。
- ベストアンサー
時間帯によってclass名を変更したい
時間帯毎に特定のボックス内の背景色を変更したいのですが、 スタイルシートで色を設定しておいて、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の知識はなく、ヒント等から自分で書くことはできないので、 恐縮ですが具体的なソースをお願いできればありがたいです。 どうぞよろしくお願いします。
- 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="○○" の「○○」の部分だけを変更する事は無理なのでしょうか。
関連するQ&A
- スクロールバーの色変更（長文）
スクロールバーの色を設定したいのですが、下のように書くとうまく設定できません。 どこがおかしいのでしょうか？ よろしくおねがいいたします。 <html> <head> <style type="text/css"> <!-- body { scrollbar-3dlight-color:#808080; scrollbar-arrow-color:#ffffff; scrollbar-base-color:#ffffff; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff;} body { background-image:url("top/newtop.jpg"); background-repeat:no-repeat; background-attachment:fixed; background-position:50% 20%; background-color:#ffffff; } div { text-arign:center; padding:10px; border-width:thin; border-style:dotted; background-color:transparent; } #kousinrireki{ position:static; margin-top:20px; margin-right:80%; margin-bottom:70%; margin-left:0%; } #reserve { text-arign:center; padding:0px; border-width:thin; border-style:none; background-color:transparent; color:maroon; ｝ --> </style> </head> <BODY TEXT="#708090"> <font size=-2> <body> <div id="kousinrireki"> ※リニューアル♪<BR> </div> <div id="reserve"> Fumio All rights reserved<BR> </div> </body> </html>
- ベストアンサー
- HTML
- 外部スタイルシートへの記入方法について
外部スタイルシートへの記入方法について 下記ボックスを利用したいのですが 外部ファイルにまとめて記載できたらと思いましたがどうも上手くいきません。 どなたか詳しい方にご教授願えないでしょうか、 よろしくお願い致します。 <div class="box_01"> この中にタイトルを記載と 本文を記載する </div> <TABLE width="400"><TR><TD> <DIV style="width : 400px"> <DIV style="border-width : 1px;border-color : #333333 ;border-style : solid"> <DIV style="border-width : 1px;border-color : #FFFFFF #999999 #999999 #FFFFFF;border-style : solid;"> <DIV style="background-color : #D0D0D0;padding : 1px"> <DIV style="padding : 3 3 4 3px;text-align : center">- タイトル -</DIV> <DIV style="border-width : 1px;border-color : #999999 #FFFFFF #FFFFFF #999999;border-style : solid;"> <DIV style="border : 1px #333333 solid;background-color : #FFFFFF;padding : 10px;"> <br><hr> ↓<BR> ↓<BR> <center> ↓<BR> ↓<BR> </center> ↓<BR> ↓<BR> <hr> </DIV> </DIV> </DIV> </DIV> </DIV> </TD></TR></TABLE> くれくれで恐縮ですがどうぞよろしくお願い致します。
- ベストアンサー
- CSS
- ｃｓｓで一個のテーブルだけにデザインを反映したい
ｃssの編集で、テーブルすべてに反映されてしまって困っています。 下記は書籍のサンプルを抜粋したものですが、 /*--------------------------- ▼テーブル -------------------------- */ table { background-color:#000033;} th { background-color:#005890; color:#ffffff; } td { background-color:#ffffff; color:#333333; } /*--------------------------- ▲テーブル -------------------------- */ という設定にしたら、すべてのテーブルに反映されました。 このテーブルだけ、という風にしたいのですが、スタイルシート側を どうしたらいいのでしょうか？ ちなみに反映したいhtmlファイルのテーブルのソースは下記の感じなのですが、 div とか postとかをtableの前に持っていけばいい？みたいなところまで 調べてわかっているのですが、まったくの初心者でなかなかうまくいきません。 <div class="post"> <table width="400" border="0" cellspacing="1"> ・・・略・・・ </table> </div>
- ベストアンサー
- HTML
- CSSで「overflow:scroll」をしてい
CSSで「overflow:scroll」をしているボックス内で表示している 特定のボックスを最前面に表示させることは 可能なのでしょうか。 文字では説明しにくいので 例として ------------- <STYLE type="text/css"> .box1{ overflow: scroll; width: 200px; height: 100px; } .box2{ width: 200px; height: 40px; background-color: yellow; position: relative } .box3{ width: 200px; height: 40px; background-color: pink; position: relative; left: 100px; top: -10px } </STYLE> <div class="box1"> <div class="box2">Box No.2</div> <div class="box3">Box No.3</div> </div> ------------- だとして、 <div class="box3">Box No.3</div>を <div class="box1">よりも前面に表示させたいのですが スタイルシートで実現可能なのでしょうか。 いろいろ調べながらやってみましたが 解決できなかったので知恵をお貸し頂ければと思い 投稿させて頂きました。 よろしくお願い致します。
- ベストアンサー
- CSS
- 状況（変数）によってclassを変えるには
<style type=text/css><!-- .sub1 a:hover{color: red;} .sub2 a:hover{color: blue;} --> ・・・（省略)・・・ <style type="javascript"> var status = "sub1"; </style> ・・・（省略)・・・ <div id="location1" class="sub1"> <a href="#">この色を変更</a> </div> --------------------------- statusの状況によってid="location1"のclassを変えたいと思っています。 statusの状況が"sub2"だったらclassをsub2に、"sub1"だったらclassをsub1に変更したいのです。 こんな事ってできるのでしょうか？ご存知の方、ご教授ください。
- ベストアンサー
- JavaScript
- 「CSSで1つの要素に複数のクラスを指定する」に対応したブラウザは？
恥ずかしながら、最近ようやく『同一idは一つのページ内で複数用いるべきではない』の意図するところが分かってきました。これまで、この事を理解していなかったがために、 aaa ←文字色：青、背景色：黄 bbb ←文字色：緑、背景色：黄 ccc ←文字色：青、背景色：赤 ddd ←文字色：緑、背景色：赤 といった表現を実現するために、 ---CSSファイル内の記述--- .blue{color:blue;} .green{color:green;} #bg_yellow{background-color:yellow;} #bg_red{background-color:red;} ---HTMLファイル内の記述---- <div class="blue" id="bg_yellow">aaa</div> <div class="green" id="bg_yellow">bbb</div> <div class="blue" id="bg_red">ccc</div> <div class="green" id="bg_red">ddd</div> というようなソースをよく書いておりました。この場合、idの意味を理解して、解決するには、例えば下の3通りの方法があるように思います。 (1)IDを4つ作成し、1つずつ適用する ---CSSファイル内の記述--- #blue_bg_yellow{color:blue;background-color:yellow;} #green_bg_yellow{color:green;background-color:yellow;} #blue_bg_red{color:blue;background-color:red;} #green_bg_red{color:green;background-color:red;} ---HTMLファイル内の記述---- <div id="blue_bg_yellow">aaa</div> <div id="green_bg_yellow">bbb</div> <div id="blue_bg_red">ccc</div> <div id="green_bg_red">ddd</div> (2)クラスを4つ作成し、1つずつ適用する ---CSSファイル内の記述--- (1)の『#』を『.』にする ---HTMLファイル内の記述---- (1)の『id』を『class』にする (3)クラスを4つ作成し、2つずつ適用する ---CSSファイル内の記述--- .blue{color:blue;} .green{color:green;} .bg_yellow{background-color:yellow;} .bg_red{background-color:red;} ---HTMLファイル内の記述---- <div class="blue bg_yellow">aaa</div> <div class="green bg_yellow">bbb</div> <div class="blue bg_red">ccc</div> <div class="green bg_red">ddd</div> 今回の例では、数も少なく、どれでもそれほど変わらない感じですが、この(3)の書き方には、どれほどのブラウザが対応しているのでしょうか？ 個人的に使用しております ・Firefox 2.0 ・Internet Explorer 6.0 では動作するのですが、それ以外のブラウザでの動作に関してご存知の方は、ぜひ教えて下さい。(特にMacは持っていませんので、Macのブラウザの情報は非常にありがたいです) ある程度のブラウザで動作するようなら、 .b,strong{font-weight:bold;} .i,em{font-style:italic;} .u,ins{text-decoration:underline;} .s,del{text-decoration:line-through;} .u_s{text-decoration:underline line-through;} のように、よく使いそうな表現をまとめたスタイルシートを作ろうかな、などと考えております。打ち消しながら下線引く事なんかはまずないとは思いますが、これは例えばの話です。 長文を最後までお読みいただきありがとうございました。
- 締切済み
- CSS
- <div class="div_1" class=
実際のソースは <div class="div_1" class="div_2">test</div> なのに、 グーグルクロームのデペロッパーツールの elementsで見ると、 <div class="div_1">test</div> となっています。 そのためなのか、 class="div_2"のスタイルシートが適用されていません。 <div class="div_1" class="div_2"> という書き方は間違えなのでしょうか？
- ベストアンサー
- HTML
- floatについて
■ □ と並んでいた場合■にスタイルシートでfloat:leftとすると□が右にきますよね。( ■□となる) それで私はfloat:leftは『次に来る要素を自分の右に移動させる』と 解釈してました。 それで質問なのですが以下のタグの場合どうして最後に(.set1)にfloat:leftが必要なのでしょうか？ 次に要素がきていないからあっても意味がないと思ったのですが、実際 はずしてみると間に幅ができてデザインが崩れてしまいます。 また全体の枠を見えるよう最初のdivに.wakuで設定したのですがfloat:leftがあるときには長い一本の線になってしまいます。 どうしてこうなるのでしょうか？ <html> <head> <style type="text/css"> .waku{border-color:#cccccc;border-style:solid;border-width:3px;} .set1{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;float:left;} .main{border-color:#cccccc;border-style:solid;border-width:1px; width:500px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;font-weight:bold;float:left;} .set2{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;font-weight:bold; color:#ffffff;margin:0 2.5;float:left;} </style> <div class="waku" align="center"> <div class="set1"> <div>左1</div> <div>左2</div> </div> <div class="main">真ん中</div> <div class="set2">右</div> </div>
- ベストアンサー
- HTML
- CSSで謎の空白ができてしまいます。
最近CSSでサイトの構築をしているのですが↓のように途中で navi（パンくずリンク）とmenu＆main（メニューとメイン記事）の間に空白が出来てしまいます。 menuとmainにmargin: 0px;とpadding 0px;をしても駄目でした。 どうすれば良いかご指導お願いします。 http://blog-imgs-16.fc2.com/t/e/s/testestes0101/test.png 以下ソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <style type="text/css"> <!-- body{/* 全体の要素 */ margin: 0px; color: #555555; background-color: #E3E5E6; } .layout{/* 全体を決める要素 */ margin: 0px auto 0px auto; width: 850px; } .header{/* ヘッダー部分 */ padding: 35px 0px 0px 50px; height: 65px; background: url("title_bg.png"); background-repeat: no-repeat; } .navi{/* サイト内のナビゲーション */ height: 40px; padding: 13px 0px 0px 60px; font-size: 14px; background: url("menu_bg.png"); background-repeat: no-repeat; } .navi a:link{/* ナビゲーション内のリンクの色 */ color: #555555; } .navi a:visited{/* ナビゲーション内の訪問済みリンクの色 */ color: #555555; } .menu{/* メニュー部分 */ background-color: #FFFFFF; width: 215px; float: right; } .main{/* メイン部分 */ background-color: #FFFFFF; width: 635px; float: right; } .footer{/* フッター部分 */ background-color: #FFFFFF; clear: right; height: 40px; } --> </style> </head> <body> <div class="layout"> <div class="header"> <a href="index.html"><img src="title.png" border="0"></a> </div> <div class="navi"> <a href="index.html"> トップページ </a> </div> <div class="menu"> </div> <div class="main"> </div> <div class="footer"> </div> </div> </body> </html> ※タイトル画像は消してあります。
- ベストアンサー
- レンタルサーバ・ASP
- フォームのスタイルについて教えてください
プルダウンメニューを書いていて、色を変えたくなったんですが上手くいきません。 フォントとバックカラーの色は変えられるのですが、▼のある部分はどう記述すれば いいのでしょうか？？？ 教えてください。 （スタイルシートでフォームを定義しています） <style type="text/css"> <!-- INPUT { background: #FFFFFF; color: BLUE;} SELECT { background: #FFFFFF; color: BLUE;} --> ↑ここに何を記述すればいいのでしょうか？ </style>
- ベストアンサー
- HTML
お礼
希望通りに出来ました！！ これを利用したい場所はページに1ヶ所しかないため id でも全く問題ありません。 あつかましく丸投げな要望に回答いただき本当に有難うございました。