四个div，点击一个变色，其他的不变色，效果如图：

代码如下 ：

<!DOCTYPE html>

<html>

<head>

<script>

	window.onload = function(){

		var divs = document.getElementsByTagName("div");

		var len = divs.length;

		for(var i=0;i<len;i++){

            alert(i);

			divs[i].onclick = function(){

				for(var j=0;j<len;j++){

					divs[j].style.backgroundColor = "black";

				}

				this.style.backgroundColor = "red";

			};

		}

	};

</script>

</head>

<body>

		<div id="div1" style="width:100px;height:100px;background:black;margin:10px;"></div>

		<div id="div2" style="width:100px;height:100px;background:black;margin:10px;"></div>

		<div id="div3" style="width:100px;height:100px;background:black;margin:10px;"></div>

		<div id="div4" style="width:100px;height:100px;background:black;margin:10px;"></div>

</body>

</html>

　　

js切换不同的div的颜色的更多相关文章

  1. 一个简单且丑陋的js切换背景图片基础示例

    不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...

  2. JS 百度地图 换地图主题颜色（自定义）

    JS 百度地图 换地图主题颜色(自定义) 可通过这个在线编辑得到自己想要的主题:https://developer.baidu.com/map/custom/ <div id="all ...

  3. JS 百度地图 换地图主题颜色（API自带）

    JS 百度地图 换地图主题颜色(API自带) <script type="text/javascript" src="http://api.map.baidu.co ...

  4. js实现可拖动Div

    随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...

  5. js 控制展开折叠 div html dom

    js 控制展开折叠 div    html dom <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...

  6. 2.24 js处理内嵌div滚动条

    2.24 js处理内嵌div滚动条 前言    前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦.一.内嵌滚动条    1.下面这张图 ...

  7. js循环复制一个div

    <html> <head> <title>Test of cloneNode Method</title> <script type=" ...

  8. JS使用cookie实现DIV提示框只显示一次的方法

    本文实例讲述了JS使用cookie实现DIV提示框只显示一次的方法.分享给大家供大家参考,具体如下: 这里运用JavaScript的cookie技术,控制网页上的提示DIV只显示一次,也就是当用户是第 ...

  9. js jQuery显示隐藏div的几种方法

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_36135335/article/d ...

随机推荐

  1. django--静态文件（九）

    1.要加载静态文件需要配置: setting.py BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) STA ...

  2. 一、OWIN初探

    前言 OWIN在.NET Web Servers与Web Application之间定义了一套标准接口,OWIN的目标是用于解耦Web Server和Web Application.基于此标准,鼓励开 ...

  3. 深入探索c++对象模型

    第一章关于对象 c++在布局和存取时间的额外负担主要有virtual引起 virtual function:运行期动态绑定 virtual base class :base class多次出现在派生类 ...

  4. WebServices(转)

    一.序言 大家或多或少都听过WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成分.但是不得不承认的是Web ...

  5. 线程+IO流

    第十八天知识点总结 线程的停止: 1.停止一个线程,一般是通过一个变量来控制. 2.如果需要停止一个处于一个等待状态的线程,那么需要配合interrupt方法来完成 守护线程(后台线程):在一个进程中 ...

  6. Linux静默安装weblogic12（fmw_12.1.3.0.0_wls.jar）

    1.安装JDK环境 #tar zxvf jdk-7u80-linux-x64.gz #.0_80 /usr/local/jdk1..0_80/ 2.创建安装用户 #useradd weblogic # ...

  7. java中 sleep 与 wait 的区别

    1.所属类不同 sleep是Thread类的方法: wait是Object类的方法: 2.功能不同 sleep是线程用来控制自身流程的,在调用sleep()方法的过程中,线程不会释放对象锁: wait ...

  8. 怎么评价Facebook的Relay框架？Meteor.js 是什么？

    http://www.zhihu.com/question/34531232?rf=34500201 Meteor.js 是什么? 作者:陈天链接:http://www.zhihu.com/quest ...

  9. 搭载在webstorm上的go语言开发插件安装

    1. 2.搜索框内搜索go,单击“Browse repositories... ”没有匹配结果(因本人已安装好插件,所以go已经显示在上面了) 3.单击"Manage repositorie ...

  10. CLASSIC VS INTERGRATED IN IIS 7.0

    Classic mode (the only mode in IIS6 and below) is a mode where IIS only works with ISAPI extensions ...