<!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <script>

 window.onload = function (){

     var oBtn1 = document.getElementById('btn1');

     var oBtn2 = document.getElementById('btn2');

     var oBtn3 = document.getElementById('btn3');

     var oBtn4 = document.getElementById('btn4');

     var oP = document.getElementById('p1');

     var num = ;

     oBtn1.onclick = function (){

         num -= ;

         oP.style.fontSize = num + 'px';

         // JS 不允许出现"-"

         // padding-top        paddingTop

         // margin-left        marginLeft

     };

     oBtn2.onclick = function (){

         // num = num + 2;

         num += ;

         oP.style.fontSize = num + 'px';

         // JS 不允许出现"-"

     };

     oBtn3.onclick = function (){

         // oP.class = 'red';

         // class => className

         oP.className = 'red';

     };

     oBtn4.onclick = function (){

         // oP.class = 'red';

         // class => className

         oP.className = 'yellow';

     };

 };

 </script>

 <style>

 .red { width:400px; border:10px solid #; background:red; padding:20px; color:yellow; }

 .yellow { width:500px; border:5px solid #; background:yellow; padding:10px; color:red; }

 </style>

 </head>

 <body>

 <input id="btn1" type="button" value="-" />

 <input id="btn2" type="button" value="+" />

 <input id="btn3" type="button" value="红" />

 <input id="btn4" type="button" value="黄" />

 <p id="p1" style="font-size:16px;">10月28日晚，中央纪委监察部官网发布消息，贵州省委常委、遵义市委书记廖少华因涉嫌严重违纪违法接受组织调查。3天后中组部宣布对其免职。廖成为十八大后中纪委一连串"打虎"行动中第十一位落马的副省部级以上高官。</p>

 </body>

 </html>

JS的className，字体放大缩小的更多相关文章

  1. JS中图片的放大缩小没反应

    这段代码无反应: 代码如下: <script type="text/javascript"> onload = function () { document.getEl ...

  2. js监听页面放大缩小

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>d ...

  3. ubuntu终端下快捷键之--字体放大缩小

    1.快捷键 Ctrl  -   字体缩小 Ctrl  + (有的电脑是“Ctrl Shift +” 三个按键同时按下)字体放大 Ctrl 0  恢复默认字体 2.终端设置默认字体 在终端下,点击右键- ...

  4. JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效

    <html> <head>     <title>图片拖动,放大,缩小,转向</title> <script type="text/ja ...

  5. pycharm字体放大缩小设置

    放大设置 File —> settings—> Keymap —>在搜寻框中输入:increase —> Increase Font Size(双击) —> 在弹出的对话 ...

  6. pycharm动态设置字体放大缩小

    放大设置 File —> settings—> Keymap —>在搜寻框中输入:increase —> Increase Font Size(双击) —> 在弹出的对话 ...

  7. JetBrains PyCharm 2017.2 字体放大缩小 功能

  8. js判断页面放大缩小

    项目中,经常会碰到页面被放大或者缩小,导致页面显示错误,js可以判断页面放大缩小. // 若返回100则为默认无缩放,如果大于100则是放大,否则缩小 function detectZoom (){ ...

  9. JQuery实现最字体的放大缩小

    网页常常有对字体放大缩小的需求,我们不妨来看一下下面这段JQuery代码的实现. 假如在html页面代码中我们有这么一段代码: <p>啦啦啦啦啦啦啦啦啦啦</p> 那么JQue ...

随机推荐

  1. 关于springboot启动时候报错:springboot Failed to parse configuration class [Application]

    把运行的java类放在一个package下后就不再提示这个错误. 使用的ide是intellij,之前也有因为没有创建package报错的经历,可能这是intellij必须的

  2. iOS学习笔记(02) - 关键字 __kindof

    1.__kindof:表示当前类或它的子类. 2.__kindof书写格式:放在类型前面,表示修饰这个类型. 3.__kindof优点:在调用的时候,很清楚的知道返回类型. 直接举一个例子来形容这个问 ...

  3. Java语言进阶过程（转）

    [以下肯定是不完整的列表,欢迎补充] Java是一个通用的编程语言,其实可以干很多事,怎么学Java就看怎么用了. 但有一些一般的步骤: 1. 熟悉一种文本编辑器,比如Vim, Emacs, Note ...

  4. OC-之NSDate、万年历

    万年历计算星期-基姆拉尔森公式 #include /* * 基姆拉尔森计算公式* W= (d+2*m+3*(m+1)/5+y+y/4-y/100+y/400) mod 7*/int week(int ...

  5. 设计模式--静态工厂设计模式在android中的使用

    今天看到这篇文章:http://www.androiddesignpatterns.com/2012/05/using-newinstance-to-instantiate.html public c ...

  6. UVA 796 Critical Links

    输出桥. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #in ...

  7. FCFS

    (First Come First Served) 按照作业进入系统的先后次序来挑选作业,先进入系统的作业优先被挑选. FCFS算法的优缺点: 算法容易实现.但效率不高,只顾及作业等候时间,没考虑作业 ...

  8. linux配置java环境变量(转)

    linux配置java环境变量(详细) 一. 解压安装jdk 在shell终端下进入jdk-6u14-linux-i586.bin文件所在目录, 执行命令 ./jdk-6u14-linux-i586. ...

  9. 深入理解HTTP协议（转） 浏览器和服务器如何通信(HTTP协议)

    http协议学习系列 1. 基础概念篇 1.1 介绍 HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(World Wide Web C ...

  10. linux文件特殊属性介绍（s，s，t）

    文件的权限有rwx这3个读.写.执行的权限.但是,怎么 /tmp权限有些奇怪?还有, /usr/bin/passwd也有些奇怪,怎么回事呢? [root@linux ~]# ls -ld /tmp ; ...