<!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. [ An Ac a Day ^_^ ] HihoCoder 1249 Xiongnu's Land 线性扫描

    拿到了icpc北京站的参赛名额 感谢亮哥~ 虽然是地狱之战 但也要全力以赴! 题意: 有一片沙漠 n片绿洲 让你用一条线分成两部分 左≥右 而且分割线要尽量靠右 问线的位置 思路: 网上说可以二分 没 ...

  2. 抛弃阿里云，中国用户购买海外VPS的五个理由

    王掌柜在过去的五年多时间里,折腾过不少vps品牌,最开始玩的是一年一百多块钱的香港虚拟主机,后来业务量大了,开始折腾国内的小鸟云.阿里云.腾讯云.电信云.百度云主机,国外的linode\interse ...

  3. NOIP2014-普及组复赛-第四题-子矩阵

    题目描述 Description 给出如下定义: 1. 子矩阵:从一个矩阵当中选取某些行和某些列交叉位置所组成的新矩阵(保持行与列的相对顺序)被称为原矩阵的一个子矩阵. 例如,下面左图中选取第2.4行 ...

  4. Openjudge-计算概论（A）-取石子游戏

    描述: 有两堆石子,两个人轮流去取.每次取的时候,只能从较多的那堆石子里取,并且取的数目必须是较少的那堆石子数目的整数倍.最后谁能够把一堆石子取空谁就算赢. 比如初始的时候两堆石子的数目是25和7 2 ...

  5. JavaScript实现本地数据简单存取以及Json数据存取

    1.判断本地存储是否可用: if(window.localStorage) { // localStorge可用 }else { // localStorge不可用 } 2.存储数据: // 获取本地 ...

  6. 为什么yslow用不了

    因为yslow暂时不支持 Firefox 36以上版本.建议您可以使用它的书签版.访问这里 http://yslow.org/mobile/把页面最后的那个 Desktop Bookmarklet I ...

  7. 《Think in UML》读后感

  8. swift 手势之UIPanGestureRecognizer

  9. grub4dos新手指南-1

    对于多数没有或很少接触过linux的windows用户来说,刚开始使用grub时离不开菜单.也就是说,使用grub前,我们要准备menu.lst文件.先讲一些最为常用的命令help用来显示其它命令的用 ...

  10. hadoop pig入门总结

    在这里贴一个pig源码的分析,做pig很长时间没做笔记,不包含任何细节,以后有机会再说吧 http://blackproof.iteye.com/blog/1769219 hadoop pig入门总结 ...