Marketing tools

2008年6月27日 22:47 | コメント(1)

文字サイズを小さく、文字サイズを大きくするjavascript

webサイトで文字サイズを変更できるのをたまに見かけます。
簡易的に、文字サイズを小さくしたり大きくしたりするサンプルを作成しました。

文字サイズを小さく、文字サイズを大きくする

サンプルソースコード

<input type="submit" value="文字を小さく" onclick="document.body.style.fontSize = '70%'" />
<input type="submit" value="文字を大きく" onclick="document.body.style.fontSize = '130%'" />

文字サイズをクリックする度に小さく、文字サイズをクリックする度に大きくする

なぜかぞえぞえねっとでは、これが動かないのでソースをコピーして実験してみてください。

サンプルソースコード

<input type="submit" value="文字を小さく" onclick="fontsize = fontsize * 0.8;document.body.style.fontSize = fontsize + '%'; " />
<input type="submit" value="文字を大きく" onclick="fontsize = fontsize * 1.2;document.body.style.fontSize = fontsize + '%'; " />

指定された場所の文字サイズを小さく、文字サイズを大きくする

ここに書かれている文字が変化します。
サンプルソースコード

<input type="submit" value="文字を小さく" onclick="document.getElementById('samplefont').style.fontSize = '70%'" />
<input type="submit" value="文字を大きく" onclick="document.getElementById('samplefont').style.fontSize = '130%'" />
<div id="samplefont">ここに書かれている文字が変化します。</div>

< 木村 藤子：「気づき」の幸せ（2007/5） 　 飯田 史彦：愛の論理―私たちは、どこまで愛せばゆるされるのか（2000/7） >

web制作に関係のある記事一覧

コメント(1)

2009年6月 6日 19:38

dairy さん

こういうの、探しておりました！
ありがとうございます！！

コメントする


1205333 hit
Copyright ぞえぞえねっと All rights reserved