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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>用循环将三个DIV变成红色</title>

<style>

#outer{width:330px;height:100px;margin:10px auto;}

#outer div{float:left;width:100px;height:100px;margin:0 5px;background:black;}

</style>

<script>

window.onload = function ()

{

    var oDiv = document.getElementById("outer").getElementsByTagName("div");

    var oBtn = document.getElementsByTagName("button")[0];

    oBtn.onclick = function ()

    {

        for(var i = 0; i < oDiv.length; i++) oDiv[i].style.background = "red";

    }

}

</script>

</head>

<body>

<center><button>点击将DIV变成红色</button></center>

<div id="outer">

    <div></div>

    <div></div>

    <div></div>

</div>

</body>

</html>

用循环将三个DIV变成红色的更多相关文章

  1. JavaScript小练习3-用循环使三个DIV变色

    题目 初始为黑色,点击后为红色,再次点击为黑色,以后每次点击一次变色. 分析 简单的onclick使用. button的居中可以在外套一个p元素,body中让p居中即可. 三个DIV块的居中,使用ma ...

  2. javascript小练习—点击将DIV变成红色（通过for循环遍历）

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. xHTML+div布局：三个div,两边div宽度固定，中间div宽度自适应

    xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应. 和大家分享一个实现方式: 1.html代码 <div class="dyleft"> ...

  4. matlab for循环的三种类型

    学习了一半了,发现一个好网站,就是我想写这篇博客用的,网络真是个好东西!纪念下国庆啦 网址:http://www.yiibai.com/matlab/matlab_for_loop.html ---- ...

  5. 三个div向左浮动不在同一行，向右浮动在同一行的解决办法

    前几天在写代码的时候发现了一个问题,问题的大致描述如下: 在一个大的div中,同一行有三个小的div,当三个小的div均向左浮动时,会出现换行问题,均向右浮动时却在同一行. 解决这个问题的方法是在:在 ...

  6. CSS笔记 - fgm练习 - 三个div变色 - CSS div等分布局

    <title>三个div变红</title> <style> *{margin: 0; padding: 0} body{ text-align: center; ...

  7. 三个div并排

    css: .div-inline{ display:inline} html: <div class="div-inline">第一个div盒子</div> ...

  8. 实现三个div，固定左右两边的div宽为200，中间的div宽度自适应的四种方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 用jquery或js实现三个div自动循环轮播

    //3个div的统一class = 'div' var index =0; //3秒轮播一次 var timer = setInterval(function(){     index = (inde ...

随机推荐

  1. Python之基于socket和select模块实现IO多路复用

    '''IO指的是输入输出,一部分指的是文件操作,还有一部分网络传输操作,例如soekct就是其中之一:多路复用指的是利用一种机制,同时使用多个IO,例如同时监听多个文件句柄(socket对象一旦传送或 ...

  2. 【bzoj2721】[Violet 5]樱花 数论

    题目描述 输入 输出 样例输入 2 样例输出 3 题解 数论 设1/x+1/y=1/m,那么xm+ym=xy,所以xy-xm-ym+m^2=m^2,所以(x-m)(y-m)=m^2. 所以解的数量就是 ...

  3. java写文件的基本操作

    import java.io.BufferedWriter; import java.io.File; import java.io.FileWriter; import java.io.IOExce ...

  4. 在react当中巧用扩展运算符

    ...props可以把没有写到的属性补充完整 ...style 可以把style 属性在styles当中展开

  5. 深入比较选择 Angular 还是 React

    我应该选择 Angular 还是 React?现在JS框架两强的格局让许多开发者选择起来很纠结.无论你是一个正在思考如何入门的新手,还是一个为下个项目挑选框架的设计者,或是一个架构师为公司做长远的规划 ...

  6. 转：Java 动态代理的内部实现机制（大体意思正确，写的还行的一篇文章）

    转:Java动态绑定的内部实现机制 JAVA虚拟机调用一个类方法时,它会基于对象引用的类型(通常在编译时可知)来选择所调用的方法.相反,当虚拟机调用一个实例方法时,它会基于对象实际 的类型(只能在运行 ...

  7. 贪吃蛇（bzoj 4213）

    Description  最近lwher迷上了贪吃蛇游戏,在玩了几天却从未占满全地图的情况下,他不得不承认自己是一个弱菜,只能改去开发一款更弱的贪吃蛇游戏. 在开发的过程中,lwher脑洞大开,搞了一 ...

  8. 乌班图中的ssh服务

    SSH服务(TCP端口号22):安全的命令解释器                                     为客户机提供安全的Shell 环境,用于远程管理                ...

  9. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---32

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  10. uva 1149:Bin Packing(贪心)

    题意:给定N物品的重量,背包容量M,一个背包最多放两个东西.问至少多少个背包. 思路:贪心,最大的和最小的放.如果这样都不行,那最大的一定孤独终生.否则,相伴而行. 代码: #include < ...