js切换不同的div的颜色
四个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的颜色的更多相关文章
- 一个简单且丑陋的js切换背景图片基础示例
不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...
- JS 百度地图 换地图主题颜色（自定义）
JS 百度地图 换地图主题颜色(自定义) 可通过这个在线编辑得到自己想要的主题:https://developer.baidu.com/map/custom/ <div id="all ...
- JS 百度地图 换地图主题颜色（API自带）
JS 百度地图 换地图主题颜色(API自带) <script type="text/javascript" src="http://api.map.baidu.co ...
- js实现可拖动Div
随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...
- js 控制展开折叠 div html dom
js 控制展开折叠 div html dom <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...
- 2.24 js处理内嵌div滚动条
2.24 js处理内嵌div滚动条 前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦.一.内嵌滚动条 1.下面这张图 ...
- js循环复制一个div
<html> <head> <title>Test of cloneNode Method</title> <script type=" ...
- JS使用cookie实现DIV提示框只显示一次的方法
本文实例讲述了JS使用cookie实现DIV提示框只显示一次的方法.分享给大家供大家参考,具体如下: 这里运用JavaScript的cookie技术,控制网页上的提示DIV只显示一次,也就是当用户是第 ...
- js jQuery显示隐藏div的几种方法
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_36135335/article/d ...
随机推荐
- hibernate复合主键
需要用到实体类Role的主键和Menu的主键结合起来作为实体类RoleMenu的主键,那么通过Hibernate具体实现如下: RoleMenu实体类:(注意该实体类需要实现Serializable接 ...
- cs端调用Ajax
private static string Descoder() { //ajax地址 string MealFilePath = "http://***/user/SetWebsite.a ...
- 环境搭建 Hadoop+Hive(orcfile格式)+Presto实现大数据存储查询一
一.前言 Hadoop简介 Hadoop就是一个实现了Google云计算系统的开源系统,包括并行计算模型Map/Reduce,分布式文件系统HDFS,以及分布式数据库Hbase,同时Hadoop的相关 ...
- Oracle重新装机后如何快速还原以前表和用户
本人使用的oracle10g 首先拷贝以前的oradata 文件夹 一:重新创建oracle数据库后手动关闭oracle所有服务 二:将oradata中新创建的数据库目录改名,d:\app\user\ ...
- mysql error: (2006, 'MySQL server has gone away')
max_allowed_packet=16M wait_timeout= interactive_timeout = vim /etc/my.cnf mysqld 中加入上面的内容.
- 第六百零六天 how can I 坚持（应该是六百零六天吧）
找了个考研的借口,也是挺逗的,终于结束了,而且考的很渣. 最近发生了很多事,很快就要离开泛华了,放弃安逸,开始改变吧,其实感觉自己内心挺怂的,很怕改变,哎,这不像是有梦想,能成事的人应该有的. 还是想 ...
- git不是内部命令和可执行程序解决方法
1.从Git官网下载windows版本的git:http://git-scm.com/downloads 2.一般使用默认设置即可:一路next,git安装完毕! 3.但是如果这时你打开windows ...
- Google Protocol Buffer 的使用
简介 Google Protocol Buffer( 简称 Protobuf) 是 Google 公司内部的混合语言数据标准,目前已经正在使用的有超过 48,162 种报文格式定义和超过 12,183 ...
- Generate SQL from Excel
Tips: SUBSTITUTE(D4,"'","''")---if D4 contain ', this function will convert ' ...
- Asp.Net 4.0 FormAuthentication 原理
建立一个使用Asp.Net Membership管理登陆登出信息的网站 1. 创建一个Asp.Net Mvc 3 示例网站. 2. 创建自定义的MemberShipProvider,并在Web.CON ...