読み込むCSSファイルを切り替えるためのプルダウンメニューを作る
次に、CSSファイルの切り替え候補を選択させるプルダウンメニューを作りましょう。例えば、以下のようにHTMLを記述しておきます。
スタイルの変更：
<select onchange="changesytle('mystyle',value);">
<option value="style.css">標準スタイル</option>
<option value="red.css">赤系スタイル</option>
<option value="blue.css">青系スタイル</option>
<option value="sea.css">海スタイル</option>
<option value="">スタイルなし</option>
</select>
上記では、「標準スタイル」・「赤系スタイル」・「青系スタイル」・「海スタイル」・「スタイルなし」の5項目を用意しています。 それぞれの項目は、以下のようにoption要素を使って作ります。<option value="CSSファイル名">表示する文字列</option>この記述を、必要なだけ(＝CSSファイルの数だけ)列挙しておきます。
■value属性値「CSSファイル名」の部分について
value属性値には、切り替えたいCSSファイルの名称を記述します。HTMLと同じディレクトリ内にあるならファイル名を書くだけで構いません。もし異なるディレクトリにあるなら、相対パスや絶対パスを使って記述します。「http://」から記述しても構いません。
なお、最後のoption要素のように、value属性値にファイル名を記述せず「空っぽ」にしておけば、「スタイルシートを適用しない」項目を作れます。
■option要素の内容「表示する文字列」の部分について
プルダウンメニューの項目として表示する文字列には、何でも好きな文字列を記述して構いません。どんなデザインなのかを示す短い名称でも書いておけばよいでしょう。
■プルダウンメニューが変更されたらスクリプトを実行するonchange属性について
select要素内に記述した「onchange="changesytle('mystyle',value);"」の部分は、後述するスクリプトを呼び出している箇所です。onchange属性を使っているので、閲覧者がプルダウンメニューの項目を変化させたときに実行されます。ここでは、後で作成する「changestyle」という関数を呼び出しています。この関数には、「変更対象のid名」と「選択された値(＝CSSファイル名)」の2つを渡しています。これによって、CSSファイルを切り替えられます。
なお、「mystyle」の部分は、CSSファイルを読み込むlink要素に付加したid属性の値と同じにして下さい。本記事に掲載したサンプルソースをそのまま使っている場合は「mystyle」のままで構いません。ここでは、id名を示す「mystyle」には引用符が必要ですが、value属性値を示す「value」には引用符を付けてはいけません。間違えないよう注意して下さい。
プルダウンメニューの表示例
上記のHTMLを表示すると、以下のようなプルダウンメニューが表示されます。スタイルの変更：
ここではまだJavaScriptを用意していないので、プルダウンメニューの項目を変化させても何も起きません。それでは次に、CSSファイルを変更するためのJavaScriptソースを記述しましょう。それを書けば完成です。
