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 ...
随机推荐
- 二模15day1解题报告
T1.合并序列(minval) 给出长为 n的AB两个序列求两两相加中最小的n个. 据说有证明(在蓝书上,优先队列部分)先把A[1~n]+b[1]入队,然后每取一个a[x]+b[y]就把a[x]+b[ ...
- AIDL小结
AIDL : Android Interface Define Language(接口定义语言) Service中跨进程间通信利器.... 一般都会有Client端和Server端(Server端提供 ...
- 软件调试——IA-32 保护模式下寄存器一览
最近在看张银奎先生的<调试软件>一书,想将关键的技术记录下来,以便日后查阅,也分享给想看之人吧. 1 通用寄存器 EAX,EBX,ECX,EDX:用于运算的通用寄存器,可以使用AX,BX等 ...
- Linux cache释放
cache释放: To free pagecache: > /proc/sys/vm/drop_caches To free dentries and inodes: > /proc/sy ...
- Spring使用非applicationContext.xm 默认名的配置文件的配置
Spring默认的配置文件是applicationContext.xml,但是有些时候,希望拆分Spring的配置文件,让其单一化,每一个都只进行自己的配置,如图所示 那么就需要在web.xml中配置 ...
- flag--命令行参数解析之StringVar
func StringVar func StringVar(p *string, name string, value string, usage string) StringVar定义了一个有指定名 ...
- Asp.net 未处理异常
页面级捕获未处理异常 - Page 的 Error 事件 Protected Sub Page_Error(ByVal sender As Object, ByVal e As System.Even ...
- Java白皮书的关键术语
“白皮书”可以在http://www.oracle.com/technetwork/java/langenv-140151.html上找到. 1.简单性. 2.面向对象. 3.网络技能(Network ...
- php工作笔记6-手机端适应缩放
1.静态页面
- Ajax的基本使用
AJAX AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = ...