<!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 = 14;
   
  oBtn1.onclick = function (){
  num -= 2;
  oP.style.fontSize = num + 'px';
  // JS 不允许出现"-"
  // padding-top paddingTop
  // margin-left marginLeft
  };
  oBtn2.onclick = function (){
  // num = num + 2;
  num += 2;
   
  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 #333; background:red; padding:20px; color:yellow; }
  .yellow { width:500px; border:5px solid #333; 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>
   

classname 就是在css上添加类，然后js的类名等于的更多相关文章

  1. jquery，从后台查数据，给页面上添加树形。

    前台jquery+ajax请求往页面上添加树形的js代码 //传入当前点击节点的id,在后台代码查询出parentid=当前节点id的记录数,从而实现点击当前节点,往后台发送ajax请求,查询出子节点 ...

  2. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  3. ASP.NET MVC 扩展HtmlHelper类为 js ,css 资源文件添加版本号

    写在前面 在项目部署当中会需要更新 css 文件或 js 等资源文件,为了避免由于浏览器缓存的原因无法加载新的 css 或 js ,一般的做法是在资源文件的后面加上一个版本号来解决,这样浏览器就会去服 ...

  4. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  5. CSS 属性 - 伪类和伪元素的区别

    伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...

  6. 二.CSS的伪类

    CSS的伪类(Pseudo-classes)分为两种:UI伪类和结构化伪类,伪类一般用于向某些选择器添加特殊的效果,伪类选择符用"  : "进行标示,如果是“ ::  ” 表示CS ...

  7. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  8. 【百度地图API】如何在地图上添加标注？——另有：坐标拾取工具+打车费用接口介绍

    原文:[百度地图API]如何在地图上添加标注?--另有:坐标拾取工具+打车费用接口介绍 摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. ------ ...

  9. 【百度地图API】建立全国银行位置查询系统（三）——如何在地图上添加银行标注

    原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo, ...

随机推荐

  1. Python基础篇-day5

    本节目录: 1.生成器 1.1 列表推导式方法 1.2 函数法--适用复杂的推导方法2.迭代器3.装饰器 3.1 单一验证方式(调用不传参数) 3.2 单一验证方式(调用传参数) 3.3 多种验证方式 ...

  2. [转] Android root 原理

    欢迎转载,转载请注明出处:http://www.cnblogs.com/lanrenxinxin/p/5572640.html 0x00 关于root linux和类Unix系统的最初设计都是针对多用 ...

  3. imagick-3.1.0RC2 安装错误

    PHP 5.4.8 安装 imagick-3.1.0RC2 安装冒出一大堆错误, 貌似跟 ImageMagick-6.8.0-2 这个版本有关系, 我之前换成低版本的 ImageMagick 就可以顺 ...

  4. zoj 1718 poj 2031 Building a Space Station

    最小生成树,用了Kruskal算法.POJ上C++能过,G++不能过... 算出每两个圆心之间的距离,如果距离小于两半径之和,那么这两个圆心之间的距离直接等于0,否则等于距离-R[i]-R[j]. # ...

  5. java 导出excel(简单案例)

    public class Student { private int id; private String name; private int age; private Date birth; pub ...

  6. XmlNode和XmlElement区别

    今天在做ASP.NET操作XML文档的过程中,发现了两个类:XmlNode和XmlElement.这两个类的功能极其类似(因为我们一般都是在对Element节点进行操作).上网搜罗了半天,千篇一律的答 ...

  7. 《Intel汇编第5版》 汇编减法程序

    第一步: 安装虚拟机32位XP系统 + RadAsm软件 第二步:    下载<Intel汇编语言程序设计第5版>中相关的源代码以及库文件           http://kipirvi ...

  8. vultr使用snapshots系统镜像备份安装vps

    vultr vps提供免费的snapshots功能,把你的vps做成镜像备份,在必要的时候可以恢复.如果你要配置多台机器,使用Snapshots非常方便好用. vultr添加snapshots很简单, ...

  9. chapter8_1 编译执行和错误

    1.编译 前面介绍的,dofile是一个运行lua代码块的基本操作,实际上它是一个辅助函数. loadfile才真正做了核心的工作.dofile(打开文件,执行里面的代码块)和loadfile(从文件 ...

  10. C++对象模型笔记之程序设计模型

    C++程序设计模型支持三种程序设计模型 1.程序模型(procedural model) 可以理解为过程化模型,就像C一样 2.抽象数据类型模型(ADT) 数据结构教材里有说过,查了下资料也不是很明确 ...