<!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. 小w的喜糖（candy）

    小w的喜糖(candy) 题目描述 废话不多说,反正小w要发喜糖啦!! 小w一共买了n块喜糖,发给了n个人,每个喜糖有一个种类.这时,小w突发奇想,如果这n个人相互交换手中的糖,那会有多少种方案使得每 ...

  2. Ubuntu 硬盘大小扩展

    注:途中所有图均为配置好补的截图,部分来自其它网页. 1.选择硬盘(SCSI) 2.点击扩展,在弹出框填写期望的硬盘大小(不能比原硬盘大小容量小) 3.进入虚拟机,安装GParted. 命令:sudo ...

  3. python百度贴吧爬虫

    # -*- coding: utf-8 -*- #coding=utf-8 import urllib import urllib2 import re import thread import ti ...

  4. DFA Minimization

    有点晚了我就不调试了..不过说是这么说我还是过了编译的.. #include<bits/stdc++.h> using namespace std; namespace DFA{ cons ...

  5. Java EE 学习（9）：IDEA + maven + spring 搭建 web（5）- 博客文章管理

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

  6. 51 Nod 1678 lyk与gcd

    1678 lyk与gcd 基准时间限制:2 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 这天,lyk又和gcd杠上了.它拥有一个n个数的数列,它想实现两种操作. 1:将  ai  ...

  7. 全球主要城市经纬度api

    原文发布时间为:2011-06-23 -- 来源于本人的百度文章 [由搬家工具导入] http://www.google.com/ig/cities?country=cn http://www.goo ...

  8. .net web api返回结果为json

    web api写api接口时默认返回的是把你的对象序列化后以XML形式返回,那么怎样才能让其返回为json呢,下面为大家介绍几种不错的方法 web api写api接口时默认返回的是把你的对象序列化后以 ...

  9. [LeetCode] Number of 1 Bits 位操作

    Write a function that takes an unsigned integer and returns the number of ’1' bits it has (also know ...

  10. poj 2778 DNA Sequence 状态及状态转移 AC自动机 矩阵快速幂

    题目链接 题意 给定\(m\)个字符串,问长度为\(n\)的字符串中有多少个不包含那\(m\)个字符串. (字符集为\(A,T,C,G\),\(m\leq 10\),长度\(\leq 10\),\(n ...