通過JavaScript控制字體大小的代碼

更新時間：2011年10月04日 20:02:59 作者：

這個腳本會改變一個段落內(nèi)的任何文字的字體大?。?lt;P>標簽）。如果你想改變其他標簽內(nèi)的文本編輯的getElementsByTagName（"P"）;的一部分。

為了此代碼到您的網(wǎng)頁必須使用像素大小的字體（PX），而不是相對大小的字體，使用“EM”或“％”。當然如果你使用其他字體單位的代碼可以很容易地適應這些。如果腳本不能找到一個段落的字體大小，它會默認為12px。
核心代碼:

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

包括上面的代碼在您的網(wǎng)頁（無論是放置在頭部分，或?qū)⑵浞胖迷谝粋€外部JS文件和進口）。然后可以調(diào)用的增加和減少象下面的字體大小的功能。
使用方法：

復制代碼代碼如下:

<a href="javascript:decreaseFontSize();">-</a> 
<a href="javascript:increaseFontSize();">+</a>

您可能感興趣的文章:

Bootstrap Table 雙擊、單擊行獲取該行及全表內(nèi)容
這篇文章主要介紹了Bootstrap Table 雙擊、單擊行獲取該行內(nèi)容及獲取全表的內(nèi)容,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-08-08
JS開發(fā)常用工具函數(shù)(小結(jié))
這篇文章主要介紹了JS開發(fā)常用工具函數(shù)
2019-07-07
JavaScript使用replace函數(shù)替換字符串的方法
這篇文章主要介紹了JavaScript使用replace函數(shù)替換字符串的方法,涉及javascript中replace函數(shù)的使用技巧,非常具有實用價值,需要的朋友可以參考下
2015-04-04
JavaScript在for循環(huán)中綁定事件解決事件參數(shù)不同的情況
響應一堆相似的事件，但是每個事件的參數(shù)都不同，在這種情況下就可以使用JavaScript 在for循環(huán)中綁定事件，下面有個不錯的示例，大家可以參考下
2014-01-01
JS與jQuery判斷文本框還剩多少字符可以輸入的方法
這篇文章主要介紹了JS與jQuery判斷文本框還剩多少字符可以輸入的方法,簡單分析了js字符個數(shù)統(tǒng)計的方法,并給出了jQuery字符統(tǒng)計插件textlimit的相關使用方法示例,需要的朋友可以參考下
2018-09-09
JS圖片無縫、平滑滾動代碼
這篇文章主要介紹了JS圖片無縫、平滑滾動的實現(xiàn),需要的朋友可以參考下
2014-03-03
JavaScript 深層克隆對象詳解及實例
這篇文章主要介紹了 JavaScript 深層克隆對象的相關資料,并附實例代碼，幫助大家學習參考這部分知識，需要的朋友可以參考下
2016-11-11
js實現(xiàn)按鈕顏色漸變動畫效果
這篇文章主要介紹了js實現(xiàn)按鈕顏色漸變動畫效果的方法,涉及javascript鼠標事件及頁面表單元素樣式的動態(tài)操作技巧,需要的朋友可以參考下
2015-08-08
IP地址輸入框
IP地址輸入框...
2006-08-08
實現(xiàn)點擊列表彈出列表索引的兩種方式
使用利用事件冒泡委托給列表的父節(jié)點去處理的方式第二種方式就是使用閉包了，感興趣的你可以參考下本文，或許對你學習js有所幫助
2013-03-03