フォントサイズをワンクリックで変更 | ウェブデザイナー的ホームページ制作最適化

フォントサイズをワンクリックで変更するには、
デフォルトの状態から大きなフォント『A』を押すと、
フォントが大きく表示されて、
小さいフォント『A』を押すと、
フォントが小さく表示されます。
javascriptでCSSのfont-sizeプロパティを変更することで実現します。

var Default = 2;
var tags = new Array('div','td','tr');
var sizing = nre Array('xx-small','x-small','small','medium','large','x-large','xx-large');
function FontChange(target,tarF){
if(!document.getElementByld) return
var dore = document,tarS = null,fontSize = Default,value,su,cTags;
fontSize += tarF;
if(fontSize < 0) fontSize = 0;
if(fontSize > 6) fontSize = 6;
Default = fontSize;
if(!(tarS = dore.getElementByld(target))) tarS =
dore.getElementsByTagName(target)[0];
tarS.style.fontSize = sizing[fontSize];
for(value = 0; value < tags.length; value++){
cTags = tarS.getElementsByTagName(tags[value]);
for(su = 0; su < cTags.length; su++) cTags[su].style.fontSize =sizing[fontSize];
}
}

▼HTMLソース

<p>
    フォントを大きく ⇒ <a href="javascript:FontChange('body',1)">『A』</a><br>
    フォントを小さく ⇒ <a href="javascript:FontChange('body',-1)">『A』</a><br>
</p>