[Javascript] 即時放大、縮小網頁字體

在設計網頁時，字型大小基本上都會預設一種而已，但是偶而還是需要即時放大字體才看的清楚，個人最常需要的情形就是用投影機投射時，因為光線、背影等等的關係，有時會造成畫面較不清楚。

之前都習慣用放大網頁比例來解決此問題，只是當你在 demo 網頁的版型時，放大比例就不好評估了，所以只好為了特定網頁來增加只變動字體大小的功能。

放大、縮小字型的功能，在網路上還滿多範例的，你可以用 CSS、Javascript or jQuery 等等方法來實現，在這裡我是使用最基礎的 Javascript 來做範例。

放大縮小的功能如下圖所示，在這裡只舉例放大和縮小這兩個功能：

這裡是用圖片來當作這兩個功能，然後在這兩個圖片加上 Javascript 的放大、縮小程式，分別叫做 increaseFontSize() 和 decreaseFontSize() ：

<div>
 <a href="javascript:decreaseFontSize();">
    <img src="~/Content/images/fonts_s.jpg">
 </a>
 <a href="javascript:increaseFontSize();">
    <img src="~/Content/images/fonts_m.jpg">
 </a>
</div>

Javascript 程式碼如下，這裡有多增加限制最小字體是12，最大是16，預設值是13：

var min=12;
var max=16;

function increaseFontSize() {
   // 找出所有的<div>
   var p = document.getElementsByTagName('div');
   
   // 開始針對找到的<div>迴圈來改變字體
   for(i=0; i<p.length; i++) {
   
      // 先確定有fontSize的屬性
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 13;
      }
   
      if(s != max) {
         s += 1;
      }
   
      p[i].style.fontSize = s+"px";
   }
}

function decreaseFontSize() {
   var p = document.getElementsByTagName('div');
   
   for(i=0;i<p.length;i++) {
   
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 13;
      }
   
      if(s != min) {
         s -= 1;
      }
   
      p[i].style.fontSize = s+"px";
   }   
}