スタイルシートを切り替える「styleswitcher.js」

Check このエントリーをはてなブックマークに追加

配布元：Alternative Style: Working With Alternate Style Sheets
ライセンス：不明

styleswitcher.jsはリンクにより読み込んでいるスタイルシートを切り替えることができ、文字サイズの切り替えなどによく利用されるJavaScriptライブラリです。

使い方

配布元よりダウンロードした「styleswitcher.js」をhead要素などで読み込みます。

<script type="text/javascript" src="styleswitcher.js"></script>

次にスタイルシートを読み込みます。スタイルシートは切り替え前のスタイルシートと切り替え後のスタイルシートです。
切り替え後のスタイルシートは読み込み時に反映されないようにrel属性は「alternate stylesheet」としておきます。
また、それぞれtitle属性に一意の名前をつけておきます。

<link rel="stylesheet" type="text/css" href="style1.css" title="style1" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3" />

スタイルシートを切り替えるリンクは以下のように設定します。

<a href="#" onclick="setActiveStyleSheet('link要素のtitle属性'); return false;">style1</a>

サンプル

変更されたスタイル情報はcookieに保存されるため、一度設定してしまえば、ページ遷移や再訪問の際にも反映されています。

スポンサードリンク

コメント

カテゴリー：スタイルスイッチ ライブラリ