<!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. ACM-ICPC 2018 南京赛区网络预赛

    轻轻松松也能拿到区域赛名额,CCPC真的好难 An Olympian Math Problem 问答 只看题面 54.76% 1000ms 65536K   Alice, a student of g ...

  2. 遇到的python3 不兼容 python2的地方

    python3中执行以下代码 >>> import subprocess >>> p=subprocess.Popen('ls',shell=True,stdout ...

  3. [LOJ#2323]「清华集训 2017」小Y和地铁

    [LOJ#2323]「清华集训 2017」小Y和地铁 试题描述 小Y是一个爱好旅行的OIer.一天,她来到了一个新的城市.由于不熟悉那里的交通系统,她选择了坐地铁. 她发现每条地铁线路可以看成平面上的 ...

  4. 省选算法学习-数据结构-splay

    于是乎,在丧心病狂的noip2017结束之后,我们很快就要迎来更加丧心病狂的省选了-_-|| 所以从写完上一篇博客开始到现在我一直深陷数据结构和网络流的漩涡不能自拔 今天终于想起来写博客(只是懒吧.. ...

  5. BZOJ1901 Zju2112 Dynamic Rankings 【树状数组套主席树】

    题目 给定一个含有n个数的序列a[1],a[2],a[3]--a[n],程序必须回答这样的询问:对于给定的i,j,k,在a[i],a[i+1],a[i+2]--a[j]中第k小的数是多少(1≤k≤j- ...

  6. PE

    不是projecteuler,我想说的是projecteuclid..似乎是一个有很多数学文献的网站..? PE541似乎是一道很有趣的题目,有一个暴力大概就是首先转化一下模型变成找\(\sum_{x ...

  7. iOS飘雪的动画小demo

    ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController{ UIImage ...

  8. [AGC003F] Fraction of Fractal（矩阵乘法）

    Description Snuke从他的母亲那里得到了生日礼物--一个网格.网格有H行W列.每个单元格都是黑色或白色.所有黑色单元格都是四联通的,也就是说,只做水平或垂直移动且只经过黑色单元格即可从任 ...

  9. Firebug Console API

    原文发布时间为:2011-06-06 -- 来源于本人的百度文章 [由搬家工具导入] Console API 当打开 firebug (也包括 Chrome 等浏览器的自带调试工具)，window 下 ...

  10. Docker(六)：容器

    一.启动容器 启动容器有两种方式,一种是基于镜像新建一个容器并启动,另一个是将一个在终止状态的容器重新启动,因为Docker的容器实在是太轻量了,很多用户都可以随时删除和新创建容器. 新建并启动 $s ...