ページ上での文字の拡大について

質問

http://oshiete1.goo.ne.jp/qa520022.html
コチラのページを参考にさせていただき、
文字の拡大・縮小ボタンをつくることができました。
できれば元に戻すボタンがほしいと思っています。
ソースをおしえていただけますでしょうか。
宜しくお願い致します。

回答No.1

leap_day · ベストアンサー

こんにちは

どれを参考にされてるのか分からなかったのでとりあえず簡単なの作ってみました

<style type="text/css">
.btn {
width:100px;
}
</style>
<script type="text/javascript"><!--
fsize = 100;
function sizech(val) {
fsize = fsize + eval(val);
if(fsize < 40 ) { alert("これ以上小さくできません"); fsize = 40; return false; }
if(fsize > 200) { alert("これ以上大きくできません"); fsize = 200; return false; }
if(val == "0") fsize = 100;
document.body.style.fontSize = fsize + "%";
}
//--></script>

<input type="button" class="btn" value="縮小" onclick="sizech('-20')">
<input type="button" class="btn" value="default" onclick="sizech('0')">
<input type="button" class="btn" value="拡大" onclick="sizech('+20')">

※Operaは80％以下のサイズにはなりません(パーセンテージは減ってますけど)
font-sizeを指定していない特定の要素やpx指定した要素は変更できません(ボタン内の文字も拡大するなら .btn{font-size:100%;}のようにパーセント指定で追加します）

要は元に戻すボタンを押したときにサイズを100％に変更するという条件をスクリプト内に追加していくようになると思います

No.6なら
function fsCh(i){
n+=i;
if(i=="0") n=3;
・・・・
<input type="button" value="元に戻す" onClick="fsCh(0)">

No.3なら
function sizechange(pm,pmper) {
・・・・
pmper = new Number(pmper); //←2箇所あります
if(pmper == "0") { fspre=100; }
・・・・・
<input type="button" onclick="sizechange('b','0')" value="元に戻す">

・・・でおそらくできると思います

お礼

ありがとうございます！できました！
参考にしたナンバーを書き損じていたにもかかわらず、
色んなパターンを教えていただき恐縮です。

また、お礼がとても遅くなり申し訳ございません。
本当にありがとうございました。