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

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

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

サンプルソースコード

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

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

サンプルソースコード

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

ここに書かれている文字が変化します。

サンプルソースコード

<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>

この記事が参考になったらSNSにお願いします。

この記事が属する「web制作」の情報を見る