颜色变化代码：

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. 【转】DataRow复制一行到另一个DataTable

     源地址:http://www.cnblogs.com/pains/archive/2007/11/22/969003.html   下面两个方法是DataRow复制一行到另一个DataTable的, ...

  2. shell 中使用正则表达式

    ls | xargs echo | sed 's/.*\(\w\+\)\s\(\w\+\s\)*\1d.*/\1/' 说明 \w\+表示一段连续的字符串 \s\+ 一个或者多个空格 \s* 0个或者多 ...

  3. 大型网站技术架构，4网站的高性能架构之Web前端性能优化

    一般说来Web前端指网站业务逻辑之前的部分,包括浏览器加载.网站视图模型.图片服务.CDN服务等,主要优化手段有优化浏览器访问.使用反向代理.CDN等. 4.2.1 浏览器访问优化 1.减少http请 ...

  4. ijkplayer阅读笔记系列<转>

    http://blog.csdn.net/peckjerry/article/details/47663275

  5. tab下图表展示宽高为0的问题

    tab下,默认展示第一个tab(最新订阅),第二个tab是echarts,需要动态获取父级div的宽高并赋值到图表的DOM的宽高.在实际开发过程中,发现无论如何延迟处理,或者mounted,第二个ta ...

  6. 把数据库中的数据制作成Excel数据

    把数据库中的数据制作成Excel数据 如果我们在使用Excel的时候,需要把数据库中的数据制作成Excel数据透视表,我们该怎么操作呢?如果数据在数据库中,我们不用把数据导入到工作表中,我们可以直接以 ...

  7. 类TreeSet

    /* * TreeSet能够对元素按照某种规则进行排序 * * 排序有2种方式 * A自然排序 * B比较器排序 * */ import java.util.TreeSet; /* * TreeSet ...

  8. 使用NHibernate连接MySQL数据库及增删改查

    学习资料 http://www.sikiedu.com/course/51/task/891/show https://www.codeproject.com/Articles/26123/NHibe ...

  9. 谷歌，火狐浏览器不能禁用自动补齐的bug缺陷

    IE浏览器里有autocomplete="off",可以禁止自动补全账号和密码,为了防止信息泄露,需要去除自动补齐. 自动补齐产生的场景是,form里面有密码框,因此只要将该密码框 ...

  10. Spring-Boot 整合Dubbo 解决@Reference 注解为null情况

    首先检查一下你的spring boot版本是多少? 如果是2.X 不用看了,spring boot 2.x 必定会出现这个问题, 改为 1.5.9 或其他1.x版本,目前生产环境建议使用1.x版本. ...