<!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. spring bean自动注入

    使用 @Repository.@Service.@Controller 和 @Component 将类标识为 Bean Spring 自 2.0 版本开始,陆续引入了一些注解用于简化 Spring 的 ...

  2. 微信Oauth2.0网页开放授权

    网页授权获取用户基本信息 如果用户在微信中(Web微信除外)访问公众号的第三方网页,公众号开发者可以通过此接口获取当前用户基本信息(包括昵称.性别.城市.国家).利用用户信息,可以实现体验优化.用户来 ...

  3. iOS---Objective-C: +load vs +initialize

    在 NSObject 类中有两个非常特殊的类方法 +load 和 +initialize ,用于类的初始化.这两个看似非常简单的类方法在许多方面会让人感到困惑,比如: 子类.父类.分类中的相应方法什么 ...

  4. Redis Cluster管理

    author:JevonWei 版权声明:原创作品 Redis 3开始支持了Cluster模式,增强了Redis的水平扩展能力,Redis Cluster的节点分片通过hash slot实现,每个节点 ...

  5. CDOJ 1256 二维前缀和处理

    昊昊喜欢运动 他NN 天内会参加MM 种运动(每种运动用一个[1,m][1,m] 的整数表示) 舍友有QQ 个问题 问昊昊第ll 天到第rr 天参加了多少种不同的运动 Input 输入两个数NN , ...

  6. python3的cookielib

    http://stackoverflow.com/questions/8405096/python-3-2-cookielib

  7. 【bzoj2127】happiness 最大流

    happiness Time Limit: 51 Sec  Memory Limit: 259 MBSubmit: 2579  Solved: 1245[Submit][Status][Discuss ...

  8. C++ qsort() 函数调用时实参与形参不兼容的问题解决

    <剑指OFFER>刷题笔记 —— 扑克牌顺子 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自 ...

  9. Web系统从Oracle迁移至MySQL

    前两天领导给了个活,数据库迁移,原来的系统是用的Oracle数据库,现在要改成MySql,当时没多想就接下来了,原来的系统用的框架式SSI,于是大概想了下需要作调整无非以下几点 第一 数据库迁移 第二 ...

  10. Linux 命令行下使用多行输入

    比较简单,建议实操,直接上图: 一行结束,直接敲回车换行.上一个例子,输入eof,终止多行输入:下一个例子,输入done,终止多行 ~~ 如果是参数太多,一行输入不完,可以通过 "空格\en ...