<!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. 【转】Map/Reduce简介

    转自:http://blog.csdn.net/opennaive/article/details/7514146 1. MapReduce是干啥的 因为没找到谷歌的示意图,所以我想借用一张Hadoo ...

  2. UNet简单案例讲解

    1.创建文件夹: 2.创建一个空物体,添加如下组件: Network Manager(网络管理组件): Network Manager HUD(提供一个UI): 3.创建如下模型,并设置为预制体: 给 ...

  3. HTML5与HTML4的比较

    HHTML5封装一些标签和属性,方便了开发. <form> <p> <label>Username:<input name="search" ...

  4. Struts框架详解

    1.Struts应用框架介绍 (1)框架 框架最简单的形式是指已开发过并已测试过的软件的程序块,这些程序块可以在多个软件开发工程中重用.框架提供了一个概括的体系结构模版,可以用这个模板来构建特定领域中 ...

  5. Java EE 学习（8）：IDEA + maven + spring 搭建 web（4）- 用户管理

    转载:Gaussic(一个致力于AI研究却不得不兼顾项目的研究生) 注:在阅读本文前,请先阅读: Java EE 学习(5):IDEA + maven + spring 搭建 web(1) ava E ...

  6. bzoj 2741 [FOTILE模拟赛] L

    Description 多个询问l,r,求所有子区间异或和中最大是多少 强制在线 Solution 分块+可持久化trie 1.对于每块的左端点L,预处理出L到任意一个i,[L,j] 间所有子区间异或 ...

  7. 【HDOJ5527】Too Rich（贪心，构造）

    题意:给定10种面额的货币和它们的数量上限,问构造出恰好总额为P的最小张数,无解输出-1 T=2e4,p<=1e9,c[i]<=1e5 思路:From https://blog.csdn. ...

  8. ASP.NET的最新安全漏洞Important: ASP.NET Security Vulnerability

    原文发布时间为:2010-09-20 -- 来源于本人的百度文章 [由搬家工具导入] 原文：http://weblogs.asp.net/scottgu/archive/2010/09/18/impo ...

  9. t4 template multi file output

    1.Manager.ttinclude <#@ assembly name="System.Core"#> <#@ assembly name="Sys ...

  10. hdu 1847 Good Luck in CET-4 Everybody! 组合游戏 找规律

    题目链接 题意 有\(n\)张牌,两人依次摸牌,每次摸的张数只能是\(2\)的幂次,最后没牌可摸的人为负.问先手会赢还是会输? 思路 0 1 2 3 4 5 6 7 8 9 10 11 -- P N ...