29

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

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

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

  1. #1 memo» ブログアーカイブ » 文字サイズ変更 says:

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

  2. #2 西浦忍月 says:

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

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

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

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

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

この記事にコメントする