极客观点
项目管理
HarmonyOS
设计思路：通过修改元素的class值实现改变CSS样式的目的。初始目标是想将所有"div1"更换为"div2",但是实现鲜果却是隔行变色……
案例代码：
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<title>setInterval()</title>
<style type="text/css">
.div1 {
width: 200px;
height: 100px;
background-color: gray;
}
.div2 {
width: 200px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="div1">重生之魔教教主</div>
<div class="div1">重生之魔教教主</div>
<div class="div1">重生之魔教教主</div>
<div class="div1">重生之魔教教主</div>
<div class="div1">重生之魔教教主</div>
<div class="div1">重生之魔教教主</div>
<div class="div1">重生之魔教教主</div>
<div class="div1">重生之魔教教主</div>
<div class="div1">重生之魔教教主</div>
<div class="div1">重生之魔教教主</div>
<div class="div1">重生之魔教教主</div>
<div class="div1">重生之魔教教主</div>
<div class="div1">重生之魔教教主</div>
<script type="text/javascript">
//补充代码
window.onload = function () {
var aDiv = document.getElementsByClassName("div1");
var len= aDiv.length;
for (var i = 0; i < len; i++) {
aDiv[i].className = "div2";
console.log(len);
}
}
</script>
</body>
</html>====
html5
你这样的定义的
var aDiv = document.getElementsByClassName("div1");并不是你定义之后不变的，当你操作
aDiv[i].className = "div2";之后aDiv的length就会减去1，因为第一个div1已经变成div2了，第二个div1就变成了第一个div1，但是你遍历的i已经遍历过第一个了，所以跳过了第一个div1(就是之前的第二个div1)
不知道你现在理解了吗？