記述するソースのまとめ

今回のソースをまとめて掲載しておきます。

まず、HTMLのhead要素内(<head>~</head>内)に、CSSファイルを読み込む記述と、それを切り替えるJavaScriptを記述します。
<link rel="stylesheet" type="text/css"
      href="style.css" id="mystyle">
<script type="text/javascript">
function changesytle(cssid,cssfile) {
   document.getElementById(cssid).href = cssfile;
}
</script>

次に、HTMLのbody要素内(<body>~</body>内)に、CSSファイルを切り替える候補を表示するためのプルダウンメニューを記述します。
スタイルの変更:
<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>
最初にlink要素に付加したid属性の値「mystyle」と、プルダウンメニューを作るselect要素内に記述した「mystyle」の記述は同じにしなければなりません。変更する際は、両方を同時に変更して下さい。

複数のCSSファイルを別々に変更できるように作る場合は、id名を変えて必要なだけコピーして(link要素とプルダウンメニューを)掲載して下さい。その場合でも、JavaScriptソースの記述は1回だけで十分です。切り替えたいCSSファイルがいくつあっても、呼び出すスクリプト(関数)は同じだからです。

閲覧者がスタイルシートをファイルごと切り替えられるようにする

今回は、読み込んでいるCSS(スタイルシート)ファイルを、閲覧者自身が自由に切り替えられるようにする機能の作り方をご紹介致しました。好みのデザインを選択できるようにしたり、様々な配色で表示がどう変わるのかを確認できるようにしたい場面などで、ぜひ、活用してみて下さい。

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。