ホーム > web・PC > web制作 > 文字サイズを小さく、文字サイズを大きくするjavascript

文字サイズを小さく、文字サイズを大きくする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>


この記事に関連している、 web制作 で他の記事も見ることができます。

ブログランキングに参加しています。記事がよかったと思ったらクリックお願いします。
(他のいいブログも探すこともできます。)
ブログランキング・にほんブログ村へ 人気ブログランキングへ

トラックバック(0)

このブログ記事を参照しているブログ一覧: 文字サイズを小さく、文字サイズを大きくするjavascript

このブログ記事に対するトラックバックURL: http://www.zoezoe.net/manager/mt-tb.cgi/620

コメントする

文字サイズ変更:
421709 hit