四个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. 使用BigDecimal进行精确运算

    首先我们先来看如下代码示例: 1 public class Test_1 { 2 public static void main(String[] args) { 3 System.out.print ...

  2. Apache日志分析

    Apache日志统计举例 加些来了解一下如何统计Apache的访问日志,一般可以用tail命令来实时查看日志文件变化,但是各种的应用系统中的日志会非常复杂,一堆长度超过你浏览极限的日志出现在你眼前时, ...

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

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

  4. python已字典为元素的数组排序

    dict = [ {','name':'b'}, {','name':'c'}, {','name':'a'}, {','name':'g'}, {','name':'f'} ] dict.sort( ...

  5. JAVA EE中session的理解

    转自[互动百科]http://www.baike.com/wiki/Session   Session Session:在计算机中,尤其是在网络应用中,称为“会话”.Session直接翻译成中文比较困 ...

  6. 第六百一十七天 how can I 坚持

    没什么特长,唯一有的仅是妄想,哈哈,真逗. 明天就去新项目组了,会接触些新东西吧,啊,挺好,一开始压力大点很正常,但不要放弃啊. 搞不懂我自己啊,貌似不上火了呢. 睡觉了.忘不掉.做不到.

  7. 运行R 报错R cannot R_TempDir， 继而发现/dev/mapper/VG00-LV01 磁盘空间已满

    今天在运行R脚本的时候报了个错:Fatal error: cannot create 'R_TempDir'.排除了是自己写的代码的问题,想着应该是某个没见过的原因,google之,发现网上的说法是/ ...

  8. VUE 入门基础(5)

    五,Class 与 Style 绑定 绑定HTML class 对象语法 我们可以传给v-bind:class 一个对象,以动态的切换class <div v-bind:class=" ...

  9. cxf client端借口类型找不到问题

    问题: log4j:WARN See http://logging.apache.org/log4j/1.2/faq.html#noconfig for more info.Exception in ...

  10. Res_Orders_02

    一.燃尽图展示 二.项目进展 1.实现用户名找回 2.css样式嵌入