首页 > Web开发 > 详细

原生js控制字体大小

时间:2017-11-16 21:16:58      阅读:233      评论:0      收藏:0      [点我收藏+]

上篇写到的是关于属性操作的更改添加等,那么今天通过一个简单的案例再来巩固一下更改属性值,有点类似控制新闻页面的文字大小。

首先还是先看布局,简单写一句话,并写两个按钮:

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控制字体大小

原文:http://www.cnblogs.com/web001/p/7846289.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!