text-size
火曜日, 3月 30th, 2010テキストサイズをボタンをポチポチ押して
大きくしたり小さくしたりするスクリプトを
勉強がてら作ってみる
jQueryを使用しているので、リンクを貼っていること前提です
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script type="text/javascript">// <![CDATA[ $(document).ready(function() { var count = 2 ; var textsize=["0.8em","0.9em","1em","1.2em","1.4em"] ; $('#big').click(function(){ count++: $('サイズ変更したい要素やid,class名').css("font-size",textsize[count]); if(count>4){ count=4; } }); $('#small').click(function(){ count--: $('サイズ変更したい要素やid,class名').css("font-size",textsize[count]); if(count<0){ count=0; } }); }); // ]]></script> |
#bigやら#smallやらは任意のアンカーにつけてくだされ
1 2 | <a id="big" href="#">文字を大きくするよ</a> <a id="small" href="#">文字を小さくするよ</a> |
みたいに。
で、変数countに「2」を最初に入れているのは、ブラウザ読み込み時のデフォ
文字サイズはtextsizeに配列でぶちこんでいるので、その場所（＝1em）を指定しています
クリックでcountの数値を増やしたり減らしたりして、配列から文字サイズを変えています
if文は、やたらめったにクリックされると「count=100」とかになってしまうと、文字サイズを小さく変更するまで大変！
ということで、countの数値を配列数に収めてます（0～4の間っすね）
ラクチンポン
ちなみに、WORDPRESSやらでは「$」を使用するとうまく動作しないことがしばしばあるので、
私は「$」ではなく「jQuery」を使うようにしてます。
1 | jQuery(document).ready(function(){ |
と。
