js练习用循环将三个DIV变成红色

原创于 2019-10-19 16:44:30 发布 · 374 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript练习

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用JavaScript通过循环将页面上的三个DIV元素背景颜色更改为红色，讲解了获取子元素数组并进行操作的关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用循环将三个DIV变成红色

要点：

divarr=document.getElementById('out').getElementsByTagName('div');

返回数组divarr[]，获得子元素数组
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#out div{
				height: 100px;
				width: 100px;
				margin: 10px 10px;
				background-color: #000000;
				display: inline-block;
			}
			button{
				margin: 10px auto;
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="fu()">点击将DIV变为红色</button>
		<div id="out">
			<div id="1"></div>
			<div id="2"></div>
			<div id="3"></div>
		</div>
		
		<script type="text/javascript">
			var divarr=document.getElementById('out').getElementsByTagName('div');  //返回数组divarr[]
			function fu(){
				for(i in divarr){
					divarr[i].style.backgroundColor='red';
				}
			}
			
		</script>
	</body>
</html>