text-size
火曜日, 3月 30th, 2010テキストサイズをボタンをポチポチ押して
大きくしたり小さくしたりするスクリプトを
勉強がてら作ってみる
jQueryを使用しているので、リンクを貼っていること前提です
<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>
$(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やらは任意のアンカーにつけてくだされ
<a id="big" href="#">文字を大きくするよ</a>
<a id="small" href="#">文字を小さくするよ</a>
<a id="small" href="#">文字を小さくするよ</a>
みたいに。
で、変数countに「2」を最初に入れているのは、ブラウザ読み込み時のデフォ
文字サイズはtextsizeに配列でぶちこんでいるので、その場所（＝1em）を指定しています
クリックでcountの数値を増やしたり減らしたりして、配列から文字サイズを変えています
if文は、やたらめったにクリックされると「count=100」とかになってしまうと、文字サイズを小さく変更するまで大変！
ということで、countの数値を配列数に収めてます（0～4の間っすね）
ラクチンポン
ちなみに、WORDPRESSやらでは「$」を使用するとうまく動作しないことがしばしばあるので、
私は「$」ではなく「jQuery」を使うようにしてます。
jQuery(document).ready(function(){
と。
