公開日 | 2002.9.18 | |||
最終更新日 | 2003.6.15 | |||
バージョン | ver.2.0 | |||
動作確認 | IE6.0,NN4.7,NN7.0,Opera7.0 | |||
cookie | 不使用 | |||
CSS | 使用 | |||
更新履歴 | 2003.6.15 | ver2.0 | スクリプトの簡略化(変更点:全般) |
曜日で スタイルチェンジャー ver.2.0 |
||||
◆サンプル 月、水、金曜日にアクセスすると ちょっと雰囲気が変わります。 |
||||
<機能と特徴> ・アクセスした曜日によって 適用する外部スタイルシートを指定できます。 |
||||
公開日 | 2002.9.18 | |||
最終更新日 | 2003.6.15 | |||
バージョン | ver.2.0 | |||
動作確認 | IE6.0,NN4.7,NN7.0,Opera7.0 | |||
cookie | 不使用 | |||
CSS | 使用 | |||
更新履歴 | 2003.6.15 | ver2.0 | スクリプトの簡略化(変更点:全般) |
初心者向け解説 | 中級者向け解説 | ダウンロード | ||||
1.カスタマイズフォームを使って設定をしてください。 2.ソース1を<head>〜</head>の間に書き込んでください。 3.ブラウザでテストしてみてください。 正常にスタイルが切り替われば設置は完了です。 |
||||||
初心者向け解説 | 中級者向け解説 | ダウンロード | ||||
1.ソース1を<head>〜</head>の間に書き込んでください 2.//設定〜//ここまでの1行目を条件に合わなかった時の 外部スタイルシートのパスに変更してください。 s_y_css[0] = 'css/nomal.css';
3.//設定〜//ここまでの3行目を設定してください。複数の曜日を条件にする場合はそのまま並べてください。
s_y_dat[1] = '月水金';
4.//設定〜//ここまでの4行目を条件に合った時に切り替わる外部スタイルシートのパスに変更してください。
s_y_css[1] = 'css/moerugomi.css';
5.ブラウザでテストしてみてください。 正常にスタイルが切り替われば設置は完了です。 |
||||||
カスタマイズフォーム | 補足説明 | 改造方法 | ||||
■複数の条件に当てはまる場合、
条件の[]内の数字の小さいものが優先されます。 |
||||||
カスタマイズフォーム | 補足説明 | 改造方法 | ||||
■条件を増やす。 //設定〜//ここまでの3〜4行目を2行1組で増やし 該当個所の数字を増やてください。 s_y_dat[2] = "月水金"; s_y_css[2] = "css/moerugomi.css";次に該当個所を変更してください。 1行目は曜日の条件(複数の曜日を条件にする場合はそのまま並べてください。) 2行目は条件に合った時の外部スタイルシートのパスを書き込んでください。 s_y_dat[2] = '火木'; s_y_css[2] = 'css/moenaigomi.css'; |
||||||
■ソース1(以下のソースを<head>〜</head>の間に書き込んでください) |
<script language="JavaScript" type="text/javascript"> <!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/ //ver.2.0
s_y_css = new Array(); s_y_dat = new Array();
//設定 s_y_css[0] = 'css/nomal.css'; //条件に当てはまらない時のスタイルシート
s_y_dat[1] = '月水金'; //日付の条件 s_y_css[1] = 'css/moerugomi.css'; //条件にあった時に適用するスタイルシート //ここまで
s_y_days = new Array("日","月","火","水","木","金","土"); s_y_Date = new Date(); s_y_day = s_y_Date.getDay(); s_y_style = 0;
for(i=1;i<s_y_dat.length;i++) {if(s_y_dat[i].indexOf(s_y_days[s_y_day] != -1)) {s_y_style = i; break;}}
with(document) {open(); write('<link href="'+s_y_css[i]+'" rel="stylesheet" type="text/css" />'); close();}
// --> </script>