JavaScriptによるスタイルシートCSSファイルの切替

HTMLファイル

「この星に生まれて ラブレター」の解説

• ＜link rel="stylesheet" href="css/base.css" title="base" type="text/css" /＞初期の基本となる/strong>CSSファイルの指定。
• ＜link rel="alternate stylesheet" href="css/base.css" title="base" type="text/css" /＞＜link rel="alternate stylesheet" href="css/css1.css" title="css1" type="text/css" /＞＜link rel="alternate stylesheet" href="css/css2.css" title="css2" type="text/css" /＞alternate代替のCSSファイルの指定。title=""で名前をつけておく。
• ＜script src="css/switchcss.js"＞＜/script＞JavaScriptの指定。
• ＜body onload="setInterval('yy()',1000)" onMousemove="my=event.y"＞HTMLファイルがロードされた時に１回実行される。

  • setInterval('yy()',1000)"

    yy（）という関数を1000ミリ秒間隔で実行するよう指定する。

  • onMousemove="my=event.y;"

    マウスが動いた時、myという変数にマウスカーソルのy座標を代入する。

• ＜p id="1"＞＜p id="2"＞

  パラグラフにIDを指定する。

• ＜a href="#" onclick="Changecss('base'); cc();"＞

  画像がクリックされた時、CSSファイルをbase.cssに戻し、変数Cの値を１にする。

CSSファイル

#1 { background:#FFeeaa; color:#000000;}ID＝１のパラグラフの背景と文字の色を指定する。

JavaScript

• var my=0; var c=0;

  グローバル変数、myとcの宣言と初期化。

• function Changecss(ttl) {

  CSSファイルを切替える関数。ttlにはHTMLファイルのtitle=""でつけた名前を代入する。

• function yy() {

  マウスカーソルの位置によって、CSSファイルを切替えて、特定のパラグラフの色を変える。

• mmy=my+(document.body.scrollTop || document.documentElement.scrollTop);

  画面上のｙ座標myに縦スクロールした分を足して、HTMLファイル先頭からのｙ座標を計算。

• if(c==1){setTimeout( "c0()", 20000 ); return;}

  画像がクリックされた時C＝＝１となり、20000ミリ秒の間、CSSファイルの切替えをしない。

• if(mmy＞1080) {Changecss('base') ; return;}　if(mmy＞950) {Changecss('css6') ; return;}

  mmyの値によって、切替えるCSSファイルを決める。

• function cc(){

  変数Cの値を１にする。１の間はCSSファイルの切替えは行われない。

• function c0(){

  変数Cの値を0にする。変数Cの値が１になった20000ミリ秒後に実行される。