<!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. myeclipse配置weblogicserver

    使用myeclipse设置weblogic时在window下打开preferences,选择myeclipse->Servers,选择weblogic,选择对应的版本号,这里我电脑上安装的是we ...

  2. CSS 垂直居中的5种实现方法

    利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站.         使用 CSS 实现垂直居中并不容易.有些 ...

  3. javascript中的部分函数应用

    这篇文章写的很全面,不过也啰嗦:http://benalman.com/news/2012/09/partial-application-in-javascript/ 这篇文章是神级运用:http:/ ...

  4. window.onload()与$(document).ready()区别

    浏览器加载完DOM后,会通过javascript为DOM元素添加事件,在javascript中,通常使用window.onload()方法. 在jquery中,则使用$(document).ready ...

  5. android的二进制和十六进制的相互转换工具类(一):

    二进制和十六进制的相互转换工具类: package com.gzcivil.utils; public class BinStr { /** * 将二进制转换成16进制 * @param buf * ...

  6. Csharp递归和循环实现折半查找

    static bool whilehalf(int n) { ; //低位 ; //高位 ; while(low <= hight) { if(n> arr[c]) { low = c + ...

  7. windows7 64位下运行 regsvr32 注册ocx或者dll的方法

    来源:转载   it won't work for you unless you have some form of Visual Basic tools loaded on your system: ...

  8. byte与sbyte的转换

    C#实现byte与sbyte的转换 byte[] mByte; sbyte[] mSByte = new sbyte[mByte.Length]; ; i < mByte.Length; i++ ...

  9. QT连接mysql中文显示问题

    亲测OK! #vim /etc/mysql/my.cnf [mysqld]下面加入: default-character-set=utf8 重启mysql /etc/init.d/mysql rest ...

  10. java如何在函数中调用主函数的数组

    import javax.swing.JOptionPane; public class Test { /** * @zdz */ public static void main(String[] a ...