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/ ...
随机推荐
- jQuery源码笔记——二
jQuery选择这样返回对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, con ...
- 自学Xpath的几个例子
Xpath可以对XML文件中的信息进行查找,并对XML文件树形结构进行遍历.详细语法请转:http://www.w3school.com.cn/xpath/index.asp 例子:利用在JavaSc ...
- Power Designer Repository 使用指南(一)
最近wait4friend在进行建模的时候,总是被问如果在Power Designer里面进行版本的控制.原始的方法是对PDM文件进行SVN管理,不过这个方法比较土,并且不方便版本直接图形的比较.其实 ...
- BZOJ 1087 互不侵犯king
Description 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. Input 只有一行,包 ...
- OpenCV学习(1) OpenCV的安装
前沿 准备了好几天,终于开始了,不管怎样,接下来的这个月一定把这本书很好的啃下来.当然OpenCV可以在很多的IDE下安装与配置,我这里就只在VS2010和VC6.0下安装配置了,当然这篇博文主要讲在 ...
- Java学习之Comparable与Comparator的区别
Comparable & Comparator 都是用来实现集合中元素的比较.排序的,只是 Comparable 是在集合内部定义的方法实现的排序,Comparator 是在集合外部实现的排序 ...
- hadoop笔记之Hive的数据类型
Hive的数据类型 Hive的数据类型 前面说过,Hive是一个数据仓库,相当于一个数据库.既然是数据库,那么就必须能创建表,既然有表,那么当中就有列,列中就有对应的类型 总的来讲,hive的数据类型 ...
- struts2笔记02-action和Action类
1.action action表示一个struts2的请求! 2.Action类 能够处理struts2请求的类. (1)属性的名字需要与JavaBeans属性保持一致. 属性的类型可以是任 ...
- 转:script中的async和defer
script中的async和defer defer: This Boolean attribute is set to indicate to a browser that the script is ...
- ICON图标文件解析
icon是一种图标格式,用于系统图标.软件图标等,这种图标扩展名为*.icon.*.ico.常见的软件或windows桌面上的那些图标一般都是ICON格式的. ICON文件格式比较简单,包含文件头段. ...