四个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. Apache RewriteHTTPToHTTPS

    HTTP to HTTPS Scenario : You want to force people coming to your site to use HTTPS. Either for the e ...

  2. 采用UDP协议的PIC32MZ ethernet bootloader

    了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). 经过千辛万苦,今天终于 ...

  3. Ubuntu更改鼠标灵敏度

    需要命令:xinput 清自行用 man xinput 查询 xinput 帮助文档 1.插入鼠标,打开终端,输入命令:xinput 查询当前已挂在设备 2.拔出鼠标,打开终端,再输入命令:xinpu ...

  4. JAVA代码热部署，在线不停服动态更新

    本地debug的时候,可以实时编译并更新代码,线上也可以不停服来动态更新类,即所说的java热部署.   JDK代理的两种方式: 1.premain方式是Java SE5开始就提供的代理方式,但其必须 ...

  5. myeclipse中将整块的代码所选中的代码左右移动的快捷键

    myeclipse中将整块的代码/所选中的代码左右移动的快捷键选择你要移动的代码,TAB 右移ctrl+TAB左移(我的使用Shift+TAB管用)要是不使用快捷键就是:选中代码,点击右键选中Shif ...

  6. ARCGIS多种影像裁剪

    在互联网上下载的遥感影像都进行过分幅处理,下载下来的影像多是规则的四方形,而在进行遥感影像研究时,多是针对特定区域来进行,比如研究北京市的遥感影像,不在北京市范围内的影像对于研究者就没有利用意义,如果 ...

  7. amqp事务

    摘要: 介绍confirm的工作机制.使用spring-amqp介绍事务以及发布确认的使用方式.因为事务以及发布确认是针对channel来讲,所以在一个连接中两个channel,一个channel可以 ...

  8. 用ajax实现评论刷新

    前台代码: <script src="jquery-1.8.3.js"></script> <script type="text/javas ...

  9. easyui datagrid 没数据时显示滚动条的解决方法

    今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...

  10. 写了好多次SSH现在对于框架还是有一定的基础了，但是对于框架下我们该如何进行操作呢？？？

    首先,对于一个老手来说,我们最快捷的就是ctrl+c和ctrl+v,但是我们自己应该复制哪一些代码呢? 1.在我们导完包之后,我们需要写的就是web.xml,在其中,我们要有过滤器及映射和监听器. w ...