上篇寫到的是關於屬性操作的更改添加等，那麽今天通過一個簡單的案例再來鞏固一下更改屬性值，有點類似控制新聞頁面的文字大小。

首先還是先看布局，簡單寫一句話，並寫兩個按鈕：

1 <input id="Btn1" type="button" value="+" name=""/>
2 <input id="Btn2" type="button" value="-" name=""/>
3 <p id="p1" style="font-size:14px;">這是一些文字這是一些文字這是一些文字這是一些文字</p>

效果圖如下：

然後，就要通過點擊加減按鈕來控制文字的大小了，js代碼如下：

 1 <script>
 2     window.onload= function(){
 3         var oPtxt=document.getElementById("p1");
 4         var oBtn1=document.getElementById("Btn1");
 5         var oBtn2=document.getElementById("Btn2");
 6         var num = 14; /*定義一個初始變量*/
 7         oBtn1.onclick = function(){
 8             num++;
 
 9             oPtxt.style.fontSize=num+‘px‘;
10         };
11         oBtn2.onclick = function(){
12             num--;
13             oPtxt.style.fontSize=num+‘px‘;
14         }
15     }
16 </script>

點擊“+”按鈕一下，那麽文字就會增加一像素，一直點擊便會一直變大：

點擊“-”按鈕一下，那麽文字就會減小一像素，一直點擊便會一直變小：

就是這麽的簡單，一定要註意定義初始變量的時候，一定要是全局變量，而你需要操作按鈕才使文字有變化的話，那麽變量的增加和減小就一定是局部變量。

今天就到這裏，明天繼續！加油！

原生js控制字體大小