以前のエントリーでもjQueryでフォントサイズ切替機能を作ってみましたが、今回はまた別の方法でやってみます。

以前ご紹介したやりかたは、bodyに異なるクラスを付加して、それによってフォントサイズを変えていました。これだと個別にフォントサイズを絶対指定していたりするとうまく反映されない場合も出てきます。それならば、「直接CSSを切り替えてしまえばよいではないか！」ということで、今回はスタイルシート自体を切り替える事によってフォントサイズスイッチャーを実装してみます。あ、もちろんjQueryを使ってです。(笑)

まず、スタイルを切り替えるためのトリガーとしてHTML内に下記のように書きます。

<ul>
<li><a rel="/common/css/fontlarge.css" class="styleswitch">フォントサイズ大</a></li>
<li><a rel="/common/css/master.css" class="styleswitch">デフォルト(中)</a></li>
<li><a rel="/common/css/fontsmall.css" class="styleswitch">フォントサイズ小</a></li>
</ul>

今回はrel要素内に切り替えるスタイルシートのパスを書きました。classには”styleswitch”というクラス名をあらかじめつけておきます。(補足：今回rel要素を使ってますが、別にrel要素じゃなくてもかまいません。)

変えたいCSSには　title=”changestyle”と書いておきます。titleにchangestyleと書いていないものは変わらないようにしておくわけです。

<link rel="stylesheet" href="/common/css/master.css" type="text/css" media="all" title="changestyle" />

スクリプトの全量は下記です

$(document).ready(function() {
        $('.styleswitch').click(function()
        {
		var switchstyle=(this.getAttribute("rel"));
                $('link[@title=changestyle]').removeAttr("href");
		$('link[@title=changestyle]').attr({ href: switchstyle });
		return false;
        });
});

順を追って説明しますと、まず1行目は毎度おなじみ。jQueryの定型文のようなものです。2行目の$(’.styleswitch’).click(function()は「styleswitchというクラス名のものがクリックされたら」ということです。clickのfunction以下にクリックされたときの動作を書きます。

var switchstyle=(this.getAttribute(”rel”));ですが、これはクリックされたa要素のrel属性の中身を変数に入れています。

その下の行、$(’link[@title=changestyle]’)はlink要素内のtitle属性にchangestyleと指定してあるものだけを抜き出します。後に続く.removeAttr(”href”);で一度href属性を削除しています。

最後に.attr({ href: switchstyle });でhref要素を再び指定してあげます。

かなり力技的な側面もありますが、これでCSSを切り替えることができました。通常Javascriptで同じ事をしようとすると結構大変だと思いますが、jQueryではわずか数行で書けてしまうところが良いですね。これを応用すればスタイルスイッチャーとかも実装できそうです。

• フォントサイズ切替のデモ

関連エントリー

• 関連する投稿はありません。

• Category
  • jQuery
• コメントはまだありません

現在、この記事へのトラックバックは受け付けていません。