4/5 閲覧者がスタイルシートを切り替えられる機能を作る [ホームページ作成] All About

読み込むCSSファイルを切り替えるJavaScriptを記述する

それでは、前のページで作成した「読み込むCSSファイルを切り替えるためのプルダウンメニュー」から呼び出されるJavaScriptソースを記述しましょう。これが、スタイルシートを切り替える処理を行う本体です。スクリプトそのものは、わずか3行だけ(前後のscriptタグを入れても5行だけ)です。

<script type="text/javascript">
function changesytle(cssid,cssfile) {
   document.getElementById(cssid).href = cssfile;
}
</script>

ここで記述している内容は、特に修正する必要はありません。そのままコピー＆ペーストして下さい。

■複数のCSSファイルを別々に切り替えたい場合でも、スクリプトは1つだけ
同時に複数のCSSファイルを読み込んでいて、それぞれを別々に変更させたい場合でも、上記のスクリプト(関数)は1つ記述しておくだけで十分です。なお、「changesytle」という関数名を変更した場合は、前ページで記述したプルダウンメニューを作るselect要素の「onchange」属性の値も修正する必要があります。

読み込むCSSファイルを切り替えるJavaScriptの解説

上記のJavaScriptソースの意味を、以下で簡単に解説しておきます。読み飛ばしても問題ありません。

■関数「changesytle」の動作
ここで作成したスクリプトは、「指定のid名」が付加された要素にある「href属性の値」を、「指定された値」に変更する……という動作をします。このスクリプトに「changestyle」という関数名を付けて、HTMLから呼び出せるようにしています。

ここでは、「指定のid名」とは、link要素に付加したid名です。したがって、このスクリプトは「link要素のhref属性」の値を書き換えることになります。「link要素のhref属性」とは、「読み込んでいるCSSファイルのURL」のことです。

■関数「changestyle」の呼び出し方
HTMLからは、

changestyle( 指定のid名, 指定された値 );

の形式で記述して使います。

本記事でご紹介したサンプルでは、プルダウンメニューのonchange属性で呼び出したので、以下のように記述しました。

changesytle( 'mystyle' , value );

「指定のid名」が「mystyle」で、「指定された値」が「(option要素の)value属性値」です。前ページでも述べましたが、「mystyle」の方には引用符が必要ですが、「value」の方には引用符を付けてはいけません。

■2つの引数「cssid」と「cssfile」
このスクリプトは、上記の通り2つの引数を受け取ります。「指定のid名」は変数「cssid」に、「指定された値」は変数「cssfile」に、それぞれ格納されます。
「document.getElementById(cssid).href」が、「指定のid名を持つ要素のhref属性」を示しており、ここにcssfileの値を代入しています。

以上の動作で、「プルダウンメニューで選択された項目に書かれているCSSファイル」が、「現在読み込まれているCSSファイル」と交換されることになります。