javascript小练习—点击将DIV变成红色（通过for循环遍历）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>点击将DIV变成红色</title>
<style>
body{font:12px/1.5 Tahoma;text-align:center;}
code,input,button{font-family:inherit;}
#div{width: 1000px;height: 240px;position: relative;}
#div div{width: 200px;height: 200px;background-color: black;position: relative;float: left;margin: 10px;}
button{cursor:pointer;}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById("div").getElementsByTagName("div");
var oButton = document.getElementsByTagName("button")[0];
oButton.onclick = function(){
for(var i = 0;i<oDiv.length;i++){
oDiv[i].style.backgroundColor = "red";
}
};
};
</script>
</head>
<body>
<div id="div">
<div></div>
<div></div>
<div></div>
</div>
<p><button>点击将DIV变成红色</button></p>
</body>
</html>
javascript小练习—点击将DIV变成红色（通过for循环遍历）的更多相关文章
- javascript小练习—记住密码提示框
px/px solid redpxpx]; var oTips = document.getElementById("tips"); oP.onmousemove = functi ...
- 用循环将三个DIV变成红色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript小技巧(非常全)
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcE ...
- JavaScript小实例：拖拽应用（二）
经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...
- (网页)javascript小技巧(非常全)
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcE ...
- JavaScript小练习2-网页换肤
题目 分析 三个皮肤切换按钮的选择 用li即可. 点击显示白点 li中嵌套一个li,onclick时改变子元素li的css onload 当页面加载完成后立即执行一段JavaScript代码. onl ...
- 点击一个div隐藏另一个div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何设计点击点击一个div，其他div做出对应反应，以及获取一个节点下的子节点
<div id="show"> <div>1</div> <div>2</div> <div>3</d ...
- javascript学习代码--点击按钮显示内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- mysql数据库日期是varchar类型的时间比较查询
单纯的字符串比较结果不精确. select * from 表明 where times> '2088/12/8 10:02:40' (×) 转换函数如下(数据库为varchar): selec ...
- ACCESS DLL加载错误
如今还在用ACCESS 2003,太懒没办法,升到2010变化太大了,做个Access的转版挺麻烦的.况且大家都在使用2003,也就懒得搞了. 但问题是office 2003已经out了,(Offic ...
- Properties文件的XML格式(转)
想必大家都用过*.properties文件,作为配置文件.但是,如果该文件写入了中文,待编译后内容就会成为乱码,使用native命令也好.使用ant执行编码转换也好,多少有点麻烦,与其如此,我们不如直 ...
- 图片延时加载jquery.inview.js用法详解
我们在网站上总能见到这样的效果,若是有图片,图片都是先用loading加载一小段时间,然后紧接着出来要显示的图片,即效果如下: v2_loading.gif,几秒钟时间过渡到v2_pic_01_s.j ...
- 【JQ成长笔记】jQuery cookie的使用
jquery cookie挺好用的.简单实在.菜鸟都能用得上..额.文笔不好不好..咳咳.. 先来看看jq.cookie的aip 写入cookie $.cookie("this-cookie ...
- 获取checkbox 的选中状态的id、checkbox的一些操作
var id_array=new Array(); $('input[name="id"]:checked').each(function(){ id_array.push($(t ...
- wget www.baidu.com执行流程分析
下载网页的关键函数: main.c(main) b 1394 url_parse:解析url,获取url相关信息,返回结构体 struct url 的指针,存于 url_parsed retrieve ...
- 判断进程是64bit还是32bit
#pragmaregion Includes#include<stdio.h>#include <windows.h>#pragmaendregionBOOL DoesWin ...
- [Drools]JAVA规则引擎 -- Drools 2
上一篇文章 http://blog.csdn.net/quzishen/archive/2011/01/25/6163012.aspx 描述了一些常用的drools的语法标签和一个模拟实例即发送积分的 ...
- 转:web前端面试题合集 (Javascript相关)（js异步加载详解）
1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...