用循环将三个DIV变成红色
<!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变成红色的更多相关文章
- JavaScript小练习3-用循环使三个DIV变色
题目 初始为黑色,点击后为红色,再次点击为黑色,以后每次点击一次变色. 分析 简单的onclick使用. button的居中可以在外套一个p元素,body中让p居中即可. 三个DIV块的居中,使用ma ...
- javascript小练习—点击将DIV变成红色(通过for循环遍历)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- xHTML+div布局:三个div,两边div宽度固定,中间div宽度自适应
xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应. 和大家分享一个实现方式: 1.html代码 <div class="dyleft"> ...
- matlab for循环的三种类型
学习了一半了,发现一个好网站,就是我想写这篇博客用的,网络真是个好东西!纪念下国庆啦 网址:http://www.yiibai.com/matlab/matlab_for_loop.html ---- ...
- 三个div向左浮动不在同一行,向右浮动在同一行的解决办法
前几天在写代码的时候发现了一个问题,问题的大致描述如下: 在一个大的div中,同一行有三个小的div,当三个小的div均向左浮动时,会出现换行问题,均向右浮动时却在同一行. 解决这个问题的方法是在:在 ...
- CSS笔记 - fgm练习 - 三个div变色 - CSS div等分布局
<title>三个div变红</title> <style> *{margin: 0; padding: 0} body{ text-align: center; ...
- 三个div并排
css: .div-inline{ display:inline} html: <div class="div-inline">第一个div盒子</div> ...
- 实现三个div,固定左右两边的div宽为200,中间的div宽度自适应的四种方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 用jquery或js实现三个div自动循环轮播
//3个div的统一class = 'div' var index =0; //3秒轮播一次 var timer = setInterval(function(){ index = (inde ...
随机推荐
- jQuery ajax使用$(this).parent()无效解决方法
div=$(this).parent(); //先获取父级元素 div.remove(); //再删除 $(".delStu").click(function () { ...
- 小白逛公园加强版(park)
小白逛公园加强版(park) 题目描述 小新经常陪小白去公园玩,也就是所谓的遛狗啦--在小新家附近有n个公园,这些公园通过一些路径相连,并保证每两个公园之间有且仅有一条通路相连(也就是说这是一棵树), ...
- docker (centOS 7) 使用笔记3 - docker swarm mode
1. 什么是docker swarm mode docker engine自带的 容器管理 工具.功能比较早的 docker swarm 更多,且集成在docker engine里. (docker ...
- kubernetes 之容器监控
[root@manager ~]# git clone https://github.com/kubernetes/heapster.git [root@manager ~]# cd heapster ...
- Docker:架构分解
17分钟快速浏览一遍 Docker内部构建 要理解Docker内部构建,需要理解以下三种部件: Docker镜像(Image) Docker容器(Container) Docker仓库(reposit ...
- mysql source、mysqldump 导入导出数据(转)
解决了mysql gbk编码的导入导出问题,感谢作者. 一.导入数据 1.确定 数据库默认编码,比如编码 为gbk,将读入途径编码同样设为gbk,命令为: set names gb ...
- eclipse去除所有调试断点 (转)
今天调试的时候发现之前加了太多断点,想去除所有断点,才想起来一直都没有使用过这个功能,放狗搜了一下,很快找到,记录一下. 方法一: 在工作界面,点window菜单栏,选中Preperences,在Ge ...
- 安装聊天软件telegram-cli
Telegram是一款加密通信的聊天软件,可以在linux,windows,android,chrome等运行.官方网址:https://telegram.org/ 它是有桌面版的,但作为一个linu ...
- SQL语句的执行顺序(转载+不同意见)
MySQL的语句一共分为11步,如下图所标注的那样,最先执行的总是FROM操作,最后执行的是LIMIT操作.其中每一个操作都会产生一张虚拟的表,这个虚拟的表作为一个处理的输入,只是这些虚拟的表对用户来 ...
- hdu 1492(约数的个数)
The number of divisors(约数) about Humble Numbers Time Limit: 2000/1000 MS (Java/Others) Memory Lim ...