颜色变化代码：

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" type="text/css"  href="web6.css">

    <script type="text/javascript" src="web6.js"></script>

    <style type="text/css">

        .red {

            width:100px;

            height:100px;

            background: red;

        }

        .blue{

            width:100px;

            height:100px;

            background: blue;

        }

    </style>

</head>

<body>

<div id="box" class="red">测试zhong</div>

</body>

</html>

　JS　

window.addEventListener('load',function(){

    var box=document.getElementById('box');

    box.addEventListener('click',toBlue,false);

},false);

function toRed() {

   this.className='red';

   this.removeEventListener('click',toRed,false);

   this.addEventListener('click',toBlue,false);

}

function toBlue() {

  this.className='blue';

    this.removeEventListener('click',toBlue,false);

  this.addEventListener('click',toRed,false);

}

　效果：

　16:04:28   2017-09-02

W3C 事件切换 颜色变化的更多相关文章

  1. 他们控制的定义--让背景颜色变化ViewPager逐步幻灯片

    转载请注明出处.谢谢~ 今天想说一个简单但很好的效果达到.代码是绝对简单,达到绝对easy,就是你可能想不到而已. 不多说,上效果图. 第一个效果是仿最美应用的滑动颜色变化,第二个是我项目中要用的效果 ...

  2. iOS 滑动页面标题切换颜色渐变效果

    话不多说,直接上图,要实现类似如下效果. 这个效果非常常见,这里着重讲讲核心功能 封装顶部的PageTitleView 封装构造函数 封装构造函数,让别人在创建对象时,就传入其实需要显示的内容 fra ...

  3. Visual Studio 2015 MFC之Button颜色变化-断点调试(Debug)

    软件开发,对自己的程序进行调试很重要,本次文章在上一边随笔的基础上,介绍一下Button控件做显示灯的用法,Button控件的添加和变量设置等可以参考下面的的链接:Visaul Studio 2015 ...

  4. iOS开发--QQ音乐练习,歌词的展示,歌词的滚动,歌词的颜色变化

    一.歌词的展示 -- 首先歌词是在scrollView上,scrollView的大小是两个屏幕的宽度 scrollView滚动修改透明度的代码                             ...

  5. javascript 事件传播与事件冒泡，W3C事件模型

    说实话笔者在才工作的时候就听说了什么"事件冒泡",弄了很久才弄个大概,当时理解意思是子级dom元素和父级dom元素都绑定了相同类型的事件,这时如果子级事件触发了父级也会触发,然后这 ...

  6. IE的事件与w3c事件的区别

    14. offsetWidth, scrollLeft, scrollHeight?     scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollHeig ...

  7. UI设计篇·入门篇·绘制简单自定义矩形图/设置按钮按下弹起颜色变化/设置图形旋转

    Android的基本控件和图形有限,难以满足所有的实际需要和设计需求,好在Android给出了相对完善的图形绘制和自定义控件的API,利用这些API,可以基本满足设计的需求. 自定义图像和控件的方法: ...

  8. easyui之自定义字体图标（鼠标覆盖时切换颜色）

    项目要求是自定义字体图标,使用easyui框架结构,众所周知easyui强功能弱样式,字体图标其实就是一张图片.要达到切换图标颜色的效果,要么就是有两套图,使用js控制.但是我这个人比较懒,不喜欢做复 ...

  9. vue点击切换颜色限制个数（用了mui框架）

    vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...

随机推荐

  1. jq和js用法:入口写法

    jq和js入口写法demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. Cocoapods 版本

    查看当前安装的版本 gem list 卸载版本 gem uninstall cocoapods 安装 gem install cocoapods gem install cocoapods -v 1. ...

  3. LongAdder 源码分析

    LongAdder LongAdder 能解决什么问题?什么时候使用 LongAdder? 1)LongAdder 内部包含一个基础值[base]和一个单元[Cell]数组. 没有竞争的情况下,要累加 ...

  4. Week 8 - 338.Counting Bits & 413. Arithmetic Slices

    338.Counting Bits - Medium Given a non negative integer number num. For every numbers i in the range ...

  5. Js dom 学习

    节点类型 文档节点: 一棵DOM树的顶端是文档节点,它呈现为整个页面(相当于document对象),当需要访问任何元素.属性或文本节点时,都需要通过文档节点来进行导航.(document.) 元素节点 ...

  6. oracle 11g 数据库恢复技术 ---04 rman

    四 RMAN RMAN体系结构的主要组成部分: --1 目标数据库(target) --2 RMAN命令行客户端 --3 通道(channel) --4 快速恢复区(fast recovery are ...

  7. bash shell:获取当前脚本的绝对路径(pwd/readlink)

    有时候,我们需要知道当前执行的输出shell脚本的所在绝对路径,可以用dirname实现. 我们知道 dirname 可以获取一个文件所在的路径,dirname的用处是: 输出已经去除了尾部的”/”字 ...

  8. Android.应用软件.常用程序下载地址_20190913

    1. 1.1. 健康友行 微信 官网 https://weixin.qq.com/ 抖音 chrome 百度网盘(账号:osskill)中有 1.2. 支付宝 官网 https://mobile.al ...

  9. 一份完整的 MySQL 开发规范，进大厂必看！

    作者:听风 https://www.cnblogs.com/huchong/p/10219318.html 一.数据库命令规范 1.所有数据库对象名称必须使用小写字母并用下划线分割 2.所有数据库对象 ...

  10. luogu 3426题解 （KMP）

    题面 Byteasar 想在墙上涂一段很长的字符,他为了做这件事从字符的前面一段中截取了一段作为模版. 然后将模版重复喷涂到相应的位置后就得到了他想要的字符序列.一个字符可以被喷涂很多次,但是一个位置 ...