<!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. 不要在 _ASSERT() 宏中执行功能代码 AND RELEASE版调试办法

            程序在DEBUG版正常运行,在RELEASE版就崩溃了,想调试找问题,却发现RELEASE版根本走不到断点... 需要在工程配置中将 Configuration Properties- ...

  2. 查看mms UA/profile

    查看彩信的UA/profile信息,当然可以通过打印log来看. 但还有一个比较简便的方法: 直接抓取一个MMS包,用网络包分析工具打开,找到承载该MMS信息的HTTP协议包即可查看:

  3. 请教下关于CKEditor富文本编辑框设置字体颜色的问题

    CKEDITOR.editorConfig = function( config ){ config.plugins = 'about,a11yhelp,basicstyles,bidi,blockq ...

  4. Stash安装和破解

    参考资料: http://www.unxmail.com/?p=590 上篇介绍了,Atlassian Stash v2.12.1 破解版的下载, 有同学不会安装. 我重新整理了下文档. 表述我的安装 ...

  5. windows service and process 的关系

    1.查询windows 对应的服务 sc query > 1.txt notepad 1.txt 2.查询对应的进程信息 tasklist /m > tasks.txt notepad t ...

  6. XCode工程内多Targets

    XCode工程内多Targets 可以认为一个target对应一个新的product(基于同一份代码的情况下). 虽然代码是同一份, 但编译设置(比如编译条件), 以及包含的资源文件却可以有很大的差别 ...

  7. RVM: instsallation

    login as user, do the following: curl -L https://get.rvm.io | sudo bash -s stable # add user to grou ...

  8. jQuery（2）——选择器

    选择器 利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为它们添加相应的行为.jQuery的行为规则都必须在获取到元素后才能生效. [jQuery选择器的优势] (1)简洁的写法 ...

  9. Hadoop上的中文分词与词频统计实践 （有待学习 http://www.cnblogs.com/jiejue/archive/2012/12/16/2820788.html）

    解决问题的方案 Hadoop上的中文分词与词频统计实践 首先来推荐相关材料:http://xiaoxia.org/2011/12/18/map-reduce-program-of-rmm-word-c ...

  10. Linux下tomcat的安装详解

    Linux下tomcat的安装详解 来源: ChinaUnix博客 日期: 2007.01.21 22:59 (共有0条评论) 我要评论 一,安装前的准备:1,Linux版本:我的是企业版.(至于红帽 ...