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 ...
随机推荐
- sublime 工具构建
1 Sublime Text 3 配置react语法校验 原文地址:https://segmentfault.com/a/1190000004369542?_ea=585496 终端安装 npm in ...
- Python 练习
1.有如下值集合 [11,22,33,44,55,66,77,88,99,90...],将所有大于 66 的值保存至字典的第一个key中,将小于 66 的值保存至第二个key的值中.即: {'k1': ...
- WCF ajax跨域配置
webconfig必须配置 binding="webHttpBinding" <service name="Hezi.MsgService.Send"&g ...
- UIViewController生命周期
UIViewController生命周期
- Leetcode2:Add Two Numbers@Python
You are given two linked lists representing two non-negative numbers. The digits are stored in rever ...
- 关于web前端开发学习的顺序
学习web前端开发该怎么学,按照什么顺序学习,这是很多新手朋友会遇到的问题.下面简单的说一下.由于在国内大学课程里面,几乎没有前端开发这门课程,无非就是一些网页设计之类的课程,但那些课程无论是老师讲还 ...
- java8之接口增强
Java8是由oracle公司于2014年3月正式发布,它是继java5 以来最重要的发布版本.Java8包含了很多新的特性,可以简化开发,提升代码的可读性. Java8的一些重要新特性包括: l 接 ...
- 解决ASP.Net第一次访问慢的处理（IIS8）
本篇经验以IIS8,Windows Server 2012R2做为案例. IIS8 运行在 Windows Server 2012 and Windows 8 版本以上的平台上. IIS中应用程序池和 ...
- js中各种事件的兼容性
1给元素绑定一个事件 ie8attachEvent(on+"事件",event); 高级浏览器 addEventListener("事件",event,fals ...
- Redis性能点
AliRedis是来自阿里巴巴的基于Redis改造的缓存产品,目前还未开源.网上只能搜到这么一篇资料<AliRedis单机180w QPS, 8台服务器构建1000w QPS Cache集群&g ...