<!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. 初步STL集装箱List

    List 特点: 1.它实质上是一个双向链表 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2FuZ3hpYW9idXB0/font/5a6L5L2T/f ...

  2. LeetCode: Surrounded Regions [130]

    [题目] Given a 2D board containing 'X' and 'O', capture all regions surrounded by 'X'. A region is cap ...

  3. ListView实现上拉下拉刷新加载功能

    第一步.首先在你项目中创建一个包存放支持下拉刷新和上拉加载的类:

  4. 分布式传输协调程序MSDTC配置

    尊重原著作:本文转载自http://blog.csdn.net/wilsonke/article/details/8468438 配置说明文件:http://files.cnblogs.com/hlx ...

  5. C#：获取时间年月日时分秒格式

    //获取日期+时间 DateTime.Now.ToString();            // 2008-9-4 20:02:10 DateTime.Now.ToLocalTime().ToStri ...

  6. tomcat的catalina

    Tomcat的核心分为3个部分: (1)Web容器---处理静态页面: (2)catalina --- 一个servlet容器-----处理servlet; (3)还有就是JSP容器,它就是把jsp页 ...

  7. poj1284--原根的性质

    关于原根,在百度百科上有着详细的介绍,此题主要考查原根的两个性质 1.只有奇素数才有原根. 2.一个数的原根个数为其欧拉函数的欧拉函数. 综合以上特点,可得到,我们设输入数为n,那么输出结果就为n-1 ...

  8. mysql5.1 有什么新特性

    本章介绍 新特性和已过时的特性 新特性: 1.分隔 这个特性允许把一个表里的部分数据放入文件系统中,它会根据表的创建规则来存储,一个表的不同部分被存储在不同的物理地址下.不过这个特性对于用户是不可见的 ...

  9. 生成php所需要的APNS Service pem证书的步骤

    1.登录到 iPhone Developer Connection Portal 并点击 App IDs 2.创建一个不使用通配符的 App ID .通配符 ID 不能用于推送通知服务.例如,我们的i ...

  10. javascript不同数据类型的转换

    <script type="text/javascript"> var userEnteredNumber=prompt("Please enter a nu ...