<!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循环遍历）的更多相关文章

  1. javascript小练习—记住密码提示框

    px/px solid redpxpx]; var oTips = document.getElementById("tips"); oP.onmousemove = functi ...

  2. 用循环将三个DIV变成红色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. javascript小技巧(非常全)

    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcE ...

  4. JavaScript小实例：拖拽应用（二）

    经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...

  5. (网页)javascript小技巧(非常全)

    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcE ...

  6. JavaScript小练习2-网页换肤

    题目 分析 三个皮肤切换按钮的选择 用li即可. 点击显示白点 li中嵌套一个li,onclick时改变子元素li的css onload 当页面加载完成后立即执行一段JavaScript代码. onl ...

  7. 点击一个div隐藏另一个div

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 如何设计点击点击一个div，其他div做出对应反应，以及获取一个节点下的子节点

    <div id="show"> <div>1</div> <div>2</div> <div>3</d ...

  9. javascript学习代码--点击按钮显示内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. java 获取两个日期相差的毫秒数

    方法一可以使用date的getTime()方法来将当前日期格式的时间转换为毫秒数,进而相减. long systime = new Date().getTime();//当前系统时间        l ...

  2. 修改SharePoint平台登录者显示名称

    protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { //提升权限,拿系统服务帐号来执行此段代码 ...

  3. Oracle的用户管理，授权及备份

    一.用户进行授权的操作 创建用户:刚刚创建的用户并没有任何权限 CREATE USER 用户名 indentife BY 密码 授权:  GRANT 权限1,权限2... TO 用户权限有:CREAT ...

  4. EC读书笔记系列之9：条款16、17

    条款16 成对使用new和delete时要采取相同形式 记住: ★若你在new表达式中使用[ ],必须在相应的delete中也使用[ ],反之亦然 -------------------------- ...

  5. java 多线程学习（一）

    public class ThreadA extends Thread { ; public ThreadA() { super("ThreadID:" + (++threadID ...

  6. Linux学习之less命令

    less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more 更加的有弹性.在 more 的时候,我们并没有办法向前面翻 ...

  7. Oracle学习之start with...connect by子句的用法

    转自:http://www.blogjava.net/xzclog/archive/2010/03/05/314642.html,多谢博主分享 Oracle中start with…connect by ...

  8. CSS超链接-光标-缩放

    CSS超链接-光标-缩放 1.CSS 中链接的使用2.CSS 中光标的使用3.CSS 中缩放的使用 1.CSS 中链接的使用超链接伪类属性a:link    表示该超链接文字尚未被点选a:visite ...

  9. @RISK

    Price: AUD $3,295.00   Price: AUD $2,495.00   适用于项目管理的 @RISK 免费试用版下载 » 立即购买 » 价格对比 » 许可选项 (英文) » 教学计 ...

  10. php正则表达式图谱

    php 正则表达式分类图: