颜色变化代码：

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. 基于vue模块化开发后台系统——构建项目

    文章目录如下:项目效果预览地址项目开源代码基于vue模块化开发后台系统--准备工作基于vue模块化开发后台系统--构建项目基于vue模块化开发后台系统--权限控制 前言 在熟悉上一篇说到准备工具之后, ...

  2. JavaScript method overload

     https://stackoverflow.com/questions/2187666/help-with-js-and-functions-parameters JavaScript doesn' ...

  3. 最新版本的JDK安装和配置(Java SE 10.0.2)

    1.废话少说,要么百度JDK,要么直接点传送门http://www.oracle.com/technetwork/java/javase/downloads/index.html.这里需要说的JDK包 ...

  4. Linux 下wdcp支持两种安装方式

    wdcp支持两种安装方式1 源码编译 此安装比较麻烦和耗时,一般是20分钟至一个小时不等,具体视机器配置情况而定2 RPM包安装 简单快速,下载快的话,几分钟就可以完成源码安装(ssh登录服务器,执行 ...

  5. MongoDB--(NoSQL)入门介绍

    NoSQL中比较优秀的产品 windows 下载安装 shell 基本操作(javascript 引擎) BSON扩充的数据类型(JSON的扩展,浮点型,日期型的扩充) step1.创建数据库 use ...

  6. Delphi XE2 之 FireMonkey 入门(27) - 数据绑定: TBindingsList: TBindScope

    Delphi XE2 之 FireMonkey 入门(27) - 数据绑定: TBindingsList: TBindScope 如果在编写表达式时, 如果能够随意指认需要的控件就好了(通过 Owne ...

  7. nginx的域名解析

    1.​创建域名解析结构: ngx_resolver_create(ngx_conf_t *cf, ngx_str_t *names, ngx_uint_t n) 这里面的names是dns服务器的地址 ...

  8. 必须Mark！43个优秀的Swift开源项目推荐(转)

    作为一门集百家之长的新语言,Swift拥有着苹果先天的生态优势,而其在GitHub上各种优秀的开源项目也层出不穷.本文作者@SwiftLanguage从2014年6月苹果发布Swift语言以来,便通过 ...

  9. 测开之路九十五：css进阶之光标和溢出内容处理

    光标样式:cursor 准备文字 css 溢出内容处理:overflow,默认溢出部分是显示 先把内容放到盒子里面 正常显示 不显示溢出内容 显示为滚动条 自动处理 css /* 光标样式 */p{ ...

  10. set_index()与reset_index()函数

    一 set_index()函数 1 主要是理解drop和append参数,注意与reset_index()参数的不同. import pandas as pd df = pd.DataFrame({' ...