<!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. 感谢beyond,感谢家驹

  2. POJ 2376：Cleaning Shifts（贪心）

    题目大意:有n个奶牛,他们负责在长为t个时间点的时间内值班,每个时间点至少有一个在值班,每个奶牛有一段空闲时间可以值班,求满足要求所需最少奶牛数量,无法满足则输出-1. 分析: 将奶牛空闲时间段看成线 ...

  3. 【06】next() 伪函数

    串行,第一个完成后,去执行第二个第二个异步任务,使用next()尾函数.首先我么想完成三个任务,task1,task2,task3,如图: 实现方式1: var fs = require(" ...

  4. iOS 代理为啥要用weak修饰?

    在开发中我们经常使用代理,或自己写个代理,而代理属性都用weak(assign)修饰,看过有些开发者用strong(retain),但并没发现有何不妥,也不清楚weak(assign)与strong( ...

  5. 移动WEB前端开发资源的一些素材

    meta篇: <meta name="viewport" content="width=device-width,initial-scale=1.0,user-sc ...

  6. socket介绍(webService适用场景)

    1.使用场景         - 不同的移动客户端访问      - 需要访问第三方的项目 2.访问第三方应用的方式      ISO的七层模型  : 物理层.数据链路层.网络层.传输层.表示层.会话 ...

  7. SQL Server 2005 无法连接到 127.0.0.1

    [问题描述]如果连接本机的数据库服务器,服务器名称可填: 127.0.0.1或localhost或本机机器全名(比如HOME),有时候用本机机器名可以登录SQL Server 2005,但用127.0 ...

  8. EBImage - - 给图片增加字符

    EBImage中文文档 英文版出处:http://www.bioconductor.org/packages/release/bioc/vignettes/EBImage/inst/doc/EBIma ...

  9. 横竖屏切换，activity重建问题

    最近有个需求,横屏直播A退出后返回直播列表页B(竖屏)时,在小米8上列表页B直接变成横屏的了,因为列表页B由竖屏切换成横屏了,还会重新执行生命周期onCreate()-onResume()等等. 为了 ...

  10. WKWebView遇到的问题汇总

    一.手势放大缩小页面解决方法 1.通过操作webview中scrollview的代理方法来关闭 -(UIView *)viewForZoomingInScrollView:(UIScrollView ...