4GALAXYのメモ

よくある動的に文字サイズを変更するコードをJavascript JQueryで書いてみました。

昨日の記事jQueryでcookieを超簡単に扱える事がわかったので、
早速、汎用性の高そうなコードを書いてみました。

コード

<script type="text/javascript" src="jquery.js"></script>
<script language="javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
<!--
$(function(){
$("p").css("font-size",$.cookie('fsize'));
});
function font(size){
$("p").css("font-size",size);
$.cookie("fsize",size,{expires:30,path:'/'});//※1
}
//-->
</script>
<!--▲head内-->
<ul>
<li onclick="font('10px')">小</li>
<li onclick="font('16px')">中</li>
<li onclick="font('24px')">大</li>
</ul>
<p>ここの文字の大きさが変わります</p>

表示SAMPLE

要素を指定してフォントサイズを動的に変更させる事ができます。
onclickなどのイベント属性でfont(サイズ)を指定することで動いています。
応用すればCSSの切り替え等もこれで出来ると思います。（作成しました）
※1 .cookie(name.value,{expires:保存days,path:有効パス})となります。

使用するには以下のファイルが必要です。

• jquery.js - ダウンロードページ
• jquery.cookie.js - ダウンロード

This entry was posted on 木曜日, 9月 6th, 2007 at 10:20:30 and is filed under jQuery, Ajax.You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.