classname 就是在css上添加类，然后js的类名等于
| <!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的类名等于的更多相关文章
- jquery，从后台查数据，给页面上添加树形。
前台jquery+ajax请求往页面上添加树形的js代码 //传入当前点击节点的id,在后台代码查询出parentid=当前节点id的记录数,从而实现点击当前节点,往后台发送ajax请求,查询出子节点 ...
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
- ASP.NET MVC 扩展HtmlHelper类为 js ,css 资源文件添加版本号
写在前面 在项目部署当中会需要更新 css 文件或 js 等资源文件,为了避免由于浏览器缓存的原因无法加载新的 css 或 js ,一般的做法是在资源文件的后面加上一个版本号来解决,这样浏览器就会去服 ...
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- CSS 属性 - 伪类和伪元素的区别
伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...
- 二.CSS的伪类
CSS的伪类(Pseudo-classes)分为两种:UI伪类和结构化伪类,伪类一般用于向某些选择器添加特殊的效果,伪类选择符用" : "进行标示,如果是“ :: ” 表示CS ...
- 关于css中伪类及伪元素的总结
css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...
- 【百度地图API】如何在地图上添加标注？——另有：坐标拾取工具+打车费用接口介绍
原文:[百度地图API]如何在地图上添加标注?--另有:坐标拾取工具+打车费用接口介绍 摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. ------ ...
- 【百度地图API】建立全国银行位置查询系统（三）——如何在地图上添加银行标注
原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo, ...
随机推荐
- PHP Cookei记录用户历史浏览信息的代码
[基础]Cookie常用方法:$_COOKIE['RecordLuHuiDUDU'] 得到Cookiesetcookie('RecordLuHuiDUDU',",time()-3600*24 ...
- OAuth2.0 工作流程
重要术语 Authorization Server:授权服务器,能够成功验证资源拥有者和获取授权,并在此之后分发令牌的服务器: Resource Server:资源服务器,存储用户的数据资源,能够 ...
- Mybatis的失误填坑-java.lang.Integer cannot be cast to java.lang.String
Mybatis的CRUD小Demo 为方便查看每次的增删改结果,封装了查询,用来显示数据库的记录: public static void showInfo(){ SqlSession session ...
- hbase自带mapreduce计数表行数功能
$HBASE_HOME/bin/hbase org.apache.hadoop.hbase.mapreduce.RowCounter ‘tablename’ mapreduce来计数,很快的!!!
- 解决ubuntu下的firefox无法在线播放音频和视频的问题
一贯无视 Linux 平台的腾讯(无贬义)理所当然地没有开发QQ音乐Linux版,于是想尝试QQ音乐网页版,结果发现歌曲无法播放.刚开始以为是腾讯还在网页版上用万恶的 Windows Media Pl ...
- js实现搜索框响应回车键
1.HTML页面, 注意:不要用使用form标签. Html代码 收藏代码<input type="text" name="keyword" id=&qu ...
- android中RelativeLayout无法填充ScrollView布局的问题
ScrollView是解决布局过长的情况下使用,一遍其下面会有个顶部布局,我项目里面是RelativeLayout,但是RelativeLayout无论设置 android:layout_height ...
- [妙味DOM]第一课：DOM基础概念、操作
知识点总结 childNodes.children子节点列表集合.nodeType节点类型.nodeName.nodeValue.attributes属性列表集合 childNodes和childre ...
- 【Python@Thread】thread模块
一.关于Python多线程 Python解释器中可以同时运行多个线程,但是再任意时刻只能有一个线程在解释器运行. Python虚拟机的访问是由全局解锁器(GIL)控制的,由GIL保证同时只有一个线程的 ...
- STORM在线业务实践-集群空闲CPU飙高问题排查
源:http://daiwa.ninja/index.php/2015/07/18/storm-cpu-overload/ 2015-07-18AUTHORDAIWA STORM在线业务实践-集群空闲 ...