ホームページ作成/装飾・レイアウトの動的変更 (HTML,CSS,JavaScript)

閲覧者がスタイルシートを切り替えられる機能を作る(4ページ目)

複数のCSS(スタイルシート)ファイルを用意しておき、閲覧者がプルダウンメニューを使って自由にスタイルを切り替えられる機能を作ってみましょう。読み込むCSSファイルそのものを変更できるので、装飾やレイアウトを大きく変えられます。好みのデザインを選択できるようにしたり、様々な配色で表示がどう変わるかを確認できるようにしたい場面などで便利です。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

読み込む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ファイル」と交換されることになります。

記述するソースのまとめ

最後に、今回のソースをまとめて掲載しておきます。コピー&ペーストして使ってみる際などにご活用下さい。
  • 前のページへ
  • 1
  • 3
  • 4
  • 5
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます