Ajaxもどき第一弾 CSS切替スクリプト

2007/09/03

1年以上前の記事です。内容が古い可能性があります。

以前、お話したCSSをフォームで切り替えるスクリプトです。

// CSS変換スクリプト（head部／クッキー使用）

dfcss = document.cookie +";";

sp = dfcss.indexOf("mycss",0);

mycss = dfcss.substring(sp + 6,dfcss.indexOf(";",sp));

if (dfcss == ";") { mycss = "none"; }

if ( mycss != "none" ) {

document.write('');

}

function CSSSelect(form, sel) {

c = sel.selectedIndex;

CSSname = sel.options[c].value;

document.cookie = "mycss=" + CSSname + ";expires=Fri, 31-Dec-2030 23:59:59; ";

location.reload();

}

// CSS変換スクリプト（Form部） document.write('<form name="cssform"><small>※見やすく設定してください(クッキー対応)</small><br />'); document.write('<select name="csssel">'); document.write('<option value="tate">縦置きデザイン</option>'); document.write('<option value="yoko">横置きデザイン</option>'); document.write('<option value="ns4">NetScape4.X用(不完全)</option>'); document.write('<option value="none">スタイルシートなし</option></select>'); document.write('<input type="button" value="変更" onClick="CSSSelect(this.form, csssel)">'); document.write('</form>');

■設定方法

1. クッキーとJavascriptを使います。
2. 上記スクリプトをそれぞれHEAD部とBODY内のフォームの入る位置に配置、リンク可
3. CSSフォルダを対象のHTMLファイルと同じディレクトリに配置。
4. CSSフォルダ内に、各CSSファイル（ここではtate.css等）を置く。

■解説

□head部スクリプト
1行目：クッキー読み込み
2～3行目：クッキーから必要な情報を取り出す
4行目：クッキーが空だったときの処理
5～7行目：クッキーを元にスタイルシートへのリンクタグを書き出す
8行目：CSSSelect()の定義
9行目：選択したオプション番号を取得
10行目：その内容を取得
11行目：クッキーにデータを書き込む（expiresは有効期限）
12行目：ページをリロードする
13行目：CSSSelect()の終了

□フォーム部スクリプト
Javascript非対応ブラウザで閲覧したときに、無駄なフォームを表示させたくなかったのでJavascript化しました。
[変更]をクリックするとCSSSelect()が実行されます。

□実際の動作時の流れ
1.プルダウンを選択し、変更をクリック。
2.クッキーに選択した情報が書き込まれる。
3.書き込まれたクッキーから必要な情報を取り出す。
4.取り出した情報を元にスタイルシートタグを書き出す。
5.クッキーが残っている限り常に同じデザインになる。

一応、クッキー、HTML、Javascriptを使った
Ajax風プログラムになっているような気がしますが、
いかがでしょうか？

- デザイン, プログラミング