码迷,mamicode.com
首页 > 其他好文 > 详细

文字放大缩小

时间:2017-05-17 23:44:20      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:charset   pre   char   点击   .com   har   html   size   示例   

1.点击减小按钮,文字变小

技术分享

2.点击增加按钮,文字变大

技术分享

技术分享
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <script>
 7 window.onload = function (){
 8     var oBtn1 = document.getElementById(‘btn1‘);
 9     var oBtn2 = document.getElementById(‘btn2‘);
10     var oP = document.getElementById(‘p1‘);
11     var num = 14;
12     
13     oBtn1.onclick = function (){
14         num -= 2;
15         oP.style.fontSize = num + ‘px‘;
16         // JS 不允许出现"-"
17         // padding-top        paddingTop
18         // margin-left        marginLeft
19     };
20     oBtn2.onclick = function (){
21         // num = num + 2;
22         num += 2;
23         
24         oP.style.fontSize = num + ‘px‘;
25         // JS 不允许出现“-“
26     };
27 };
28 </script>
29 </head>
30 
31 <body>
32 
33 <input id="btn1" type="button" value="-" />
34 <input id="btn2" type="button" value="+" />
35 <p id="p1" style="font-size:16px;">10月28日晚,中央纪委监察部官网发布消息,贵州省委常委、遵义市委书记廖少华因涉嫌严重违纪违法接受组织调查。3天后中组部宣布对其免职。廖成为十八大后中纪委一连串"打虎"行动中第十一位落马的副省部级以上高官。</p>
36 
37 </body>
38 </html>
示例代码:

 

文字放大缩小

标签:charset   pre   char   点击   .com   har   html   size   示例   

原文地址:http://www.cnblogs.com/123wyy123wyy/p/6869813.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!