css を一定時間で切り替える 方法

Question

css を一定時間で切り替える 方法が判らす困っています・・・。

<link rel="stylesheet" href="/Ａ.css"id="csstimer"> <link rel="stylesheet" href="/Ｂ.css"> <script type="text/javascript" src="/sp/js/time-3c.js"></script>

---

js

<script type="text/javascript"><!-- var nt = new Date(); // 現在時刻を取得 var hr = nt.getHours(); // 「時」の値を取得 if(( hr >= 9 ) || ( hr <= 18 )) { // 10時以降または18時以前の場合 document.getElementById('csstimer').href = "A.css"; } else { // それ以外の時刻の場合 document.getElementById('csstimer').href = "B.css"; } // --></script>

Aのcssを10-18 時の間で、それ以外の時間を Ｂのcss に・・としたいのですが上手く出来ないので、困っています。

質問の記載が間違っていたら申し訳ありません。わかる方が居ましたらお願い致します。

Answer 1

<link rel="stylesheet" href="/A.css" id="csstimer"> だけ有ればよくて、<link rel="stylesheet" href="/Ｂ.css">の行は不要 それで、切り替え部分はほぼそのままで良いと思いますが、「href="/A.css"」ってことはcssはルートに直接置かれているんですよね？それだとjavascriptで指定する場合も同じにしないと、HTMLをroot以外に置いていたら参照されません。 // 10時以降または18時以前の場合 document.getElementById('csstimer').href = "/A.css";

  // それ以外の時刻の場合 
  document.getElementById('csstimer').href = "/B.css"; 

※cssとhtmlを同じパスにおいているなら、「/」は不要です。

詳しく説明されている記事

Comments

[dradra]

詳しく記載頂き、ありがとうございます。早速書き換えてみます。

[hirohiro]

CSSは同じクラスが宣言された場合、後から宣言したものを優先するんですが
<link rel="stylesheet" href="/Ｂ.css">
これを下段に書いていると、上段の↓を幾ら切り替えてもB.cssのクラスが優先されてしまうかも
<link rel="stylesheet" href="/A.css" id="csstimer">

Answer 2

AとかBとかが日本語の全角になってますね。

<link rel="stylesheet" href="/Ａ.css"id="csstimer"> 
<link rel="stylesheet" href="/Ｂ.css">

ではなく

<link rel="stylesheet" href="/A.css" id="csstimer"> 
<link rel="stylesheet" href="/B.css">

かも。

実際のファイル名が全角で、JavaScriptだと半角で読み込んでるから、
ファイルが見つからず、読み込めてないのかもしれませんね。

Comments

[dradra]

回答ありがとうございます。
そこは仮で　Ａ，Ｂと入れてあります。実際には小文字　で　入れてありますので、そこは大丈夫だと思います。（個別の　Ａ（仮）　Ｂ（仮）　のcssがきちんと表示できていましたので。）

[ogaaaan]

じゃぁ単純に、linkタグを1個にすれば良いですよ。

Answer 3

if(( hr >= 9 ) || ( hr <= 18 )) {
がおかしいですね
これだと9以上または18以下となってしまい8や19 も通ります。さらに10時の間ということで
if(( hr >= 10 ) && ( hr <= 18 )) {
辺りでしょう

Comments

[dradra]

そうなんですね。。。ありがとうございます。早速、試してみます！