読み込むcssを変更するscriptを作成したい

[新着] Webテンプレートを仮オープンしました



0   名前: S.S : 2006/02/11 22:15
 外部cssファイルを使って表示色等を指定しているHTMLファイルがあります。
 この、cssファイルを月ごとに変更するようなscriptがないかと思い色々探し回ったのですが、見つかりませんでした。

 ボタンをクリックすると切り替わるscript、ランダムに切り替わるscript等を見つけ、自分の環境に合わせて正常に動作させることが出来ました。
それらを参考に目的のscriptを自分で考えてみたのですが、プログラミングの経験がほとんどなく勘所がつかめない状態です。

 javascriptを使って自動で切り替えたいと考えたのは、cgi等の使えない環境にファイルを預け頻繁に更新はできない環境で、季節ごとに更新したかのように見せられたら素敵だな、という不純?なものです。
 いままで自分で経験したことがあるのは、独学で、フリー素材のjavascriptやcgi、phpなどの表示部分の指定を見つけて好みに変更したり、明らかに自分の環境では必要としない(携帯用のプログラムなどの)部分を削除したりなどです。
心もとない状態で申し訳ありませんが、間違いの指摘やアドバイス等をいただけたら、と思い投稿しました。
また、「こういう技術を使ったら」とか、「このurl・本で基本を!」等のアドバイスも是非よろしくお願いします。

以下を、表示を変えたいファイルの<head></head>の部分の一番最後(タイトルとかContent-Typeとかを指定し終わり<body>のすぐうえあたり)に書いています。
環境ですが、最新(7ではなく)のIEで動いてくれればこのファイルの利用者は網羅できるな、と思っています。
<script Language="JavaScript">
<!--
today = newDate();
myMonth = today.getMonth();

if ( myMonth == 0){
document.write('<link rel="stylesheet" type="text/css" href="a.css">');
}
elseif ( myMonth == 1){
document.write('<link rel="stylesheet" type="text/css" href="b.css">');
}
else{
document.write('<link rel="stylesheet" type="text/css" href="c.css">');
}

//-->
</script>

1   名前: S.S : 2006/02/11 22:15
自己解決しました。

http://www.keynavi.net/ja/tipsj/debug.html
上記のページを参考にIEの設定を変更したところ、「elseif」の間のスペースがぬけていることがわかったので、訂正をしました。
それから、「today」からの行にエラーがあることがわかったので、まず「ver」をつけ、まだエラーが残っていたのですが目視では間違いが見つけられなかったので、正常に動いているスクリプトからその部分だけペーストしてみると思っているとおりの動作になりました。
<script type="text/javascript">が正しいようなのでそこも直しました。

そそっかしい質問で場所をお借りしてしまい申し訳ありませんでした。
「swich」というのを本来は使うべきなのかも、ということがわかったので引き続き勉強してみようと思います。


2   名前: Pid : 2006/02/11 22:15
お疲れ様でした。いくつかスペルミスの指摘をば。

> newDate();

new と Date の間に空白を。

> まず「ver」をつけ

var ですね。

> 「swich」というのを本来は使うべきなのかも

switch ですね。

document.write ('<link rel="stylesheet" type="text/css" href="' + (function () {
switch ((new Date).getMonth () + 1) {
case 1 :
case 2 :
case 3 :
return 'a.css'; // 1-3 月は a.css を適用

case 8 :
case 12 :
return 'b.css'; // 8, 12 月は b.css を使用

default :
return 'c.css'; // その他は c.css を適用
}
} )() +'">');

3   名前: S.S : 2006/02/11 22:15
Pidさま、ありがとうございます。
本当にケアレスミスばかりで……ご指摘感謝します。

早速switchを勉強してみて、思い通りに動かすことは出来たのですが、私は、

case 0 :
document.write('<link rel="stylesheet" type="text/css" href="a.css">'); break;
と一回一回書いてしまっていました。

実際にページを公開するまでに教えていただいたものの仕組みをしっかり理解して、使えるようになろうと思います。

一覧へ戻る