article

jQueryで簡単にCSSを切り替える

  • 2007年10月 1日

jQueryで簡単にCSSを切り替える方法にチャレンジします。

今回は、「HTMLに直書きされているlink要素のhref属性を書き換える。」というやり方で行います。

まずは、jQueryからjQuery 1.1.3.1 (compressed) 20kb(2007/08/03現在)をダウンロードしてください。そして、外部JSとしてHTMLに読み込ませてください。

では、次にHTMLとJSのサンプルを示します。サンプルではCSSを切り替えることで文字サイズを変更する仕組みを作っています。

HTML

中略
<head>
<link rel="stylesheet" href="/css/lettersize/middle.css" type="text/css" media="all" title="styleswitcher" />
</head>
中略
<body>
<ul>
<li><a href="" class="large">大きい文字サイズ</a></li>
</ul>
</body>
中略

JS

$(document).ready(function(){
        $('.large').click(function(){
                $('link[@title=styleswitcher]').attr({ href: '/css/lettersize/large.css' });
        });
});

このJSをjQueryと合わせて（外部）JSとして読み込んでください。

下記に簡単にソースの説明を行います。

  • 1 : 読み込まれたタイミングで作動させる。
  • 2 : class属性largeがクリックされると、以下の処理を行う
  • 3 : title属性styleswitcherが指定されているlink要素のhref属性を/css/lettersize/large.cssに書き換える。

後は、上記のJSを必要な分だけ増殖させれば、CSSチェンジャー的なものが出来ると思います。なんか説明が下手ですみません(>_<)

トラックバック

http://web.dimension-maker.info/cgi-bin/mt/webdimensionmaker/113

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

 

画像の中に見える文字を入力してください。