<!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. [kuangbin带你飞]专题四 最短路练习 POJ 3268 Silver Cow Party

    题意: 在一个有向图中求n头牛从自己的起点走到x再从x走回来的最远距离 思路一开始是暴力跑dij…… 讲道理不太可能…… 然后就百度了一下 才知道把矩阵转置的话就只需要求两次x的单源最短路…… /* ...

  2. 基于多线程多用户的FTP服务器与客户端功能实现

    项目介绍: 用户加密认证 允许同时多用户登录 每个用户有自己的家目录 ,且只能访问自己的家目录 对用户进行磁盘配额,每个用户的可用空间不同 允许用户在ftp server上随意切换目录 允许用户查看当 ...

  3. beginBackgroundTaskWithExpirationHandle

    [[UIApllication sharedApplication] beginBackgroundTaskWithExpirationHandle:^{}];这个方法在app进入后台时,可以做一些事 ...

  4. AccessToMySql数据库的导入以及java生成.exe文件

    一.AccessToMySql 最近做了一个Access数据库导入MySql的小工具,期间遇到诸多问题,这里小计一下. 表名为cur_rec,共有5个字段 比较奇葩的是这个表居然是四个字段的联合主键, ...

  5. url 取出文件扩展名

    /**url 取出文件扩展名 *///方法一function getExt1($url) {    $arr = parse_url($url);    $file = basename($arr[' ...

  6. js上拉跳转原理

    今天遇到一个需要上拉跳转的地方,其原理跟上拉加载有点类似,代码如下 window.onscroll = function(){ if(getScrollTop() + getClientHeight( ...

  7. JMeter基础

    转载自虫师-http://www.cnblogs.com/fnng/archive/2012/12/21/2828440.html JMeter 介绍: 一个非常优秀的开源的性能测试工具. 优点:你用 ...

  8. nodejs【伪】入门教程

    声明: 本文适合白的不能再白的小白 不要被标题误导,本文不会讲nodejs基础,只是本人学习流程和资料的一个整合 如果想找一大堆教程自己看,没有电梯,自己拉到文章最下方吧   一.nodejs是什么 ...

  9. CCF考试真题题解

    CCF考试认证:题解参考博客http://blog.csdn.net/u014578266/article/details/45221841 问题描述 试题编号: - 试题名称: 图像旋转 时间限制: ...

  10. Beanstalkd

    摘要by ck:beanstalkd  和  kafka的本质区别是什么? Beanstalkd,一个高性能.轻量级的分布式内存队列系统,最初设计的目的是想通过后台异步执行耗时的任务来降低高容量Web ...