文字サイズ変更

古いブラウザ（NN4とか）ではうまくいかないかもしれません。

全体の変更

ページ全体を変更します。

<script type="text/javascript">
var x = 100;
function larger()  { x *= 1.2; document.body.style.fontSize = x + '%'; }
function smaller() { x /= 1.2; document.body.style.fontSize = x + '%'; }
</script>

<p>
<input type="submit" value="小さく" onclick="smaller();" />
<input type="submit" value="大きく" onclick="larger();" />
</p>

部分的な変更

特定の部分だけ文字サイズを変更します。

ほげほげほげ

<script type="text/javascript">
var x = 100;
function larger()  { x *= 1.2; document.getElementById('resizable').style.fontSize = x + '%'; }
function smaller() { x /= 1.2; document.getElementById('resizable').style.fontSize = x + '%'; }
</script>

<p>
<input type="submit" value="小さく" onclick="smaller1();" />
<input type="submit" value="大きく" onclick="larger1();" />
</p>

<p id="resizable">ほげほげほげ</p>

奥村晴彦

Last modified: 2007-05-27 20:03:34