四个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. [转载]SVN-主干/分支

    一个大项目在开发中可能会拆分成几个小项目,分别分去,同时共通的部分再由人做,做完后再统一合并.同时,在开发中,共通的部分修改后,其它人要保持同步. 这种情况反应到SVN的分支/合并功能上,再贴切不过了 ...

  2. Spring Boot+Cloud RestTemplate 调用IP或域名

    在SpringBoot+Cloud的项目中,我们使用了自动配置的OAuth2RestTemplate,RestTemplate,但是在使用这些restTemplate的时候,url必须是服务的名称,如 ...

  3. 两种open()函数

    C语言中文件操作函数中,open()有两种形式: 一种形式是有两个参数open2: 另一种形式是有三个参数open3: 共有的参数有两个,第一个是"被打开文件的路径",第二个是&q ...

  4. 27. Oracle 10g下emctl start dbconsole 报错：OC4J Configuration issue 问题解决

    (dbconsole配置好外面的sqlplus才能连的上服务器上的数据库) 采取重新配置emctl 的方法来解决 [oracle@guohuias3 oracle]$ emca -config dbc ...

  5. 图解GitHub基本操作

    目录 一.注册并登陆到github网站 1.1.打开github网站首页(https://github.com/) 1.2.注册一个自己的github账号 1.3.登陆自己的github账号 二.创建 ...

  6. selenium3.0.1调用firefox

    报错信息如下时: selenium.common.exceptions.WebDriverException: Message: 'geckodriver' executable needs to b ...

  7. 命令与文件的查询 which whereis locate find

    一:which which查找脚本文件也就是我们的系统命令 用法:which [command] 默认根据我们PATH路径去查找,但是不同的用户肯定设置不同的PATH,所以就像普通用户查找不到一些/s ...

  8. Linux解压和打包jar

    linux 中解压jarunzip XXX.jar -d app 打jar 进入到解压目录里面(app)jar cvfm0 MR-XDR-JMR-NEW.jar META-INF/MANIFEST.M ...

  9. BCB中实现拖拽Panel 改变位置和大小的代码

    //--------------------------------------------------------------------------- #ifndef Unit1H #define ...

  10. ARCGIS Server 发布服务时出现的问题解决

    target='CFH.ConfigurationFactoryHost'  machine='IBM3850X5'  thread='24072'  elapsed='0.31200'>Ser ...