29
06 09 2007

トレーニングAjax入門2 jQueryでフォントサイズを変更する

jQuery, Ajax

よくある動的に文字サイズを変更するコードを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:有効パス})となります。

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

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.

2 Responses “トレーニングAjax入門2 jQueryでフォントサイズを変更する”

  1. #1 memo» ブログアーカイブ » 文字サイズ変更 says:
    8月 21st, 2008 at 22:45:20

    […] http://blog.4galaxy.net/29.html […]

  2. #2 西浦忍月 says:
    12月 4th, 2009 at 15:12:37

    すみません、まったくの初心者なのですが質問させてください。
    この記事を参考にしてフォントサイズ変更ボタンをつけることが出来ました。

    しかしインラインフレームでcgiを表示させているページがあって、フレーム（フレーム名:news）の中のフォントサイズを変えることが出来なくて悩んでいます。
    素人考えでコードの”p”の部分を”p,news”のように併記したら出来るかもと思ったのですがだめでした。
    こちらのコードをどのように変更すれば親ページとフレーム内の文字を同時に変更することが可能でしょうか？

    また、FXやIE8ではページ遷移やリロードをしても、変更した文字サイズが継承されたのですが、IE6だけ遷移やリロードで初期値に戻ってしまいます。
    これは改善する方法はないのでしょうか？

    質問ばかりで申し訳ないのですが、お時間があるときにでもアドバイスいただけるとうれしいです。

    お忙しいところすみませんが、どうかよろしくお願いします。

この記事にコメントする