首先还是先看布局,简单写一句话,并写两个按钮: HTML代码如下:
<input id="Btn1" type="button" value="+" name=""/>
<input id="Btn2" type="button" value="-" name=""/>
<p id="p1" style="font-size:14px;">这是一些文字这是一些文字这是一些文字这是一些文字</p>
效果图如下:然后,就要通过点击加减按钮来控制文字的大小了,js代码如下:
@H_301_11@ /** * 原生js控制字体大小 * * @param * @arrange (512.笔记) jb51.cc **/ <script> window.onload= function(){ var oPtxt=document.getElementById("p1"); var oBtn1=document.getElementById("Btn1"); var oBtn2=document.getElementById("Btn2"); var num = 14; /*定义一个初始变量*/ oBtn1.onclick = function(){ num++; oPtxt.style.fontSize=num+'px'; }; oBtn2.onclick = function(){ num--; oPtxt.style.fontSize=num+'px'; } } </script>点击“+”按钮一下,那么文字就会增加一像素,一直点击便会一直变大:
点击“-”按钮一下,那么文字就会减小一像素,一直点击便会一直变小:
就是这么的简单,一定要注意定义初始变量的时候,一定要是全局变量,而你需要操作按钮才使文字有变化的话,那么变量的增加和减小就一定是局部变量。