四个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. [转]解决a different object with the same identifier value was already associated with the session错误

    1.a different object with the same identifier value was already associated with the session. 错误原因:在h ...

  2. Runtime的几个小例子（含Demo）

    一.什么是runtime(也就是所谓的“运行时”,因为是在运行时实现的.)           1.runtime是一套底层的c语言API(包括很多强大实用的c语言类型,c语言函数);  [runti ...

  3. WM_GETMINMAXINFO消息 中结构体MINMAXINFO

    MINMAXINFO* lpMMI lpMMI->ptMaxSize.x = 800;  // 设置窗口最大化时的宽度 lpMMI->ptMaxSize.y = 600;  // 设置窗口 ...

  4. [转]在 ASP.NET MVC 4 中创建为移动设备优化的视图

    原文链接 https://msdn.microsoft.com/zh-cn/magazine/dn296507.aspx 如果深入探讨有关编写移动设备网站的常识性考虑因素,会发现其中有一种内在矛盾.  ...

  5. Axure 7.0 正式版 + 汉化包 安装

    详情如下: Axure 7.0 正式版终于发布了,现在提供简体中文版给大家使用. Axure 7.0 正式版: 链接: http://pan.baidu.com/s/1kV4OJ47 提取密码: be ...

  6. 学习一下mef

    微软 http://msdn.microsoft.com/zh-cn/magazine/ee291628.aspx mef http://biancheng.dnbcw.info/net/370552 ...

  7. 移动端rem页面详谈

    rem布局是移动端常见的布局之一,也是较为成熟的方案.接下来就详细说以下rem布局的实际操作. 1.首先加<meta />标签,设置视口的大小,不多说. <meta name=&qu ...

  8. 2、python，for..in语句

    for..in语句是循环语句,它迭代一个对象的序列,例如经历序列中的第一项.一个序列只是一个有序的项目的集合. for i in range(1, 5): print(i) else: print(' ...

  9. 关于C/S模式开发的学习笔记

    当今的现状,感觉是B/S大为盛行,C/S的学习者很少,就那我们学校来看,三年多来,教的.用的最多的都是B/S,在刚刚确定下来的毕设课题中,大约四分之三都是web结合安卓开发的系统.C/S的学习着很少, ...

  10. visual studio code（vscode） 调试php(转)

    原文链接:http://www.cnblogs.com/CLR010/p/5276077.html visual studio code(vscode) 调试php   1.下载vscode (vis ...