js循环改变div颜色具体方法
发布时间:2024-04-19 10:29:45
标签:js,div,颜色
在使用javascript过程中,想循环遍历一个数组,经常使用的语法有两种:
for (var i; i < array.length; i++) {
statement;
}
for (var i in array) {
statement;
}
这两种用法看起来能做同样的事情,但实际上两个循环的循环次数一般是不一样的。
源码如下:
<!DOCTYPE html>
<html>
<head>
<style>
#button{text-align:center;}
#outer{width:330px; height:100px; margin:10px auto;}
#outer div{float:left;width:100px;height:100px;margin:0px 5px;background:black;}
</style>
<script>
window.onload = function() {
var obutton = document.getElementsByTagName("button")[0];
var outer = document.getElementById("outer");
var outerDiv = outer.getElementsByTagName("div");
obutton.onclick = function() {
for(var p in outerDiv) outerDiv[p].style.background = "red";
};
};
</script>
</head>
<body>
<div id="button">
<button>点击变红色</button>
</div>
<div id="outer">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
这段代码用了 for - in 语句做循环,看上去没有问题。
可是在浏览器调试的时候,会报错:
"Uncaught TypeError: Cannot set property 'background' of undefined"
为什么会这样呢?
如果我们把 stament 的内容改一下,就会发现问题了:
for(var p in outerDiv) alert(p);
结果输出是:0 1 2 length item
所以,当 property 取到 length 和 item 时,再试图用调用 style 方法,当然就 undefined 了。 修改如下:
<!DOCTYPE html>
<html>
<head>
<style>
#button{text-align:center;}
#outer{width:330px; height:100px; margin:10px auto;}
#outer div{float:left;width:100px;height:100px;margin:0px 5px;background:black;}
</style>
<script>
window.onload = function() {
var obutton = document.getElementsByTagName("button")[0];
var outer = document.getElementById("outer");
var outerDiv = outer.getElementsByTagName("div");
obutton.onclick = function() {
for (var i = 0; i < outerDiv.length; i++){
outerDiv[i].style.background = "red";
}
};
};
</script>
</head>
<body>
<div id="button">
<button>点击变红色</button>
</div>
<div id="outer">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
0
投稿
猜你喜欢
- 1、for循环写法基本和其他语言一致,只是没有了while循环,用for代替while。样例代码如下// for循环func loop1()
- 还记得以前在工作中,将爬来的其它网站的数据导到xml。但是会遇到一个问题:即网页会有ascII的控制字符。一开始以为是别人为了防止采集而加入
- 一、Python短信发送界面最后的效果二、准备:注册腾讯云账号并配置短信功能(1)注册腾讯云账号登录腾讯云网址(2)获取AppID、AppK
- Python中的三引号,3个单引号及3个双引号实际上3个单引号和3个双引号不经常用,但是在某些特殊格式的字符串下却有大用处。通常情况下我们用
- spring boot 不连接数据库启动用spring boot 搭建的项目,在配置文件不连接数据库启动项目会报错。原因在于spring b
- 在应用程序的开发中,有些输入信息是动态的,比如我们要注册一个员工的工作经历,比如下图如果做成死的,只能填写三个,如果是四个呢?或者更多呢,那
- 一、需求1.获取你对象chrome前一天的浏览记录中的所有网址(url)和访问时间,并存在一个txt文件中2.将这个txt文件发送给指定的邮
- 本文实例讲述了Python迭代器与生成器基本用法。分享给大家供大家参考,具体如下:迭代器可以进行for循环的数据类型包括以下两种:1. 集合
- 删除一条留言信息会级联删除回复信息,这时我们需要用到事务,如下SQLALTER PROCEDURE [dbo].[proc_tb_leave
- 1、本地备份编写自动备份脚本:vim /var/lib/mysql/autobak内容如下:cd /data/home/mysqlbakrq
- 有时候使用到获取本机IP,就采用以下方式进行。#!/usr/bin/python import socketimport stru
- 前言:数据的排序是比较常用的操作,DataFrame 的排序分为两种,一种是对索引进行排序,另一种是对值进行排序,接下来就分别介绍一下。1.
- 首先以支持向量机模型为例先导入需要使用的包,我们将使用roc_curve这个函数绘制ROC曲线!from sklearn.svm impor
- 本文为大家分享了python2.7.14的安装教程,供大家参考,具体内容如下1.下载python2.7.14下载地址根据自己电脑配置进行选择
- 当使用Python的flask框架来开发网站后台,解析前端Post来的数据,通常都会使用request.form来获取前端传过来的数据,但是
- 利用原生js实现一个简易的计算器(附详细注释),供大家参考,具体内容如下<!DOCTYPE html><html lang
- 在项目开发过程中加载、启动、下载项目难免会用到进度条,如何使用Python实现进度条呢?这里为小伙伴们分享四种Python实现进度条的库:P
- 一、思路往MySQL中插入1000000条数据只花了6秒钟!关键点:1.使用PreparedStatement对象2.rewriteBatc
- IP合法性校验是开发中非常常用的,看起来很简单的判断,作用确很大,写起来比较容易出错,今天我们来总结一下,看一下3种常用的IP地址合法性校验
- 背景本文主要测试MySQL执行update语句时,针对与原数据(即未修改)相同的update语句会在MySQL内部重新执行吗?测试环境MyS