我需要在行中设置交替颜色的 div。
在我尝试在我们的后端/前端实现它之前，我试图让它在常规浏览器中工作。所以这是我的测试代码。我终其一生都无法找出为什么这不起作用。我已经尝试使用正文而不是脚本标记进行加载，并且尝试链接到外部 jS。我认为对于示例代码，这将是最简单的方法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="HTML5">
<meta name="author" content="Site">
<style>
.testclass {
width: 100%;
height: 10px;
background-color: #fdc345;
}
</style>
</head>
<body>
<div class="testclass"></div>
<div class="testclass"></div>
<div class="testclass"></div>
<div class="testclass"></div>
<script>
function isEven(value) {
if (value % 2 == 0) {
return true;
} else {
return false;
}
}
function setColors() {
var userList = document.getElementsByClassName("testclass");
var i;
for (i = 0 i < userList.length; i++) {
if (isEven(i) == true) {
userList[i].style["background-color"] = "red";
/* I also tried document.getElementsByClassName("testclass")[i].style.backgroundColor = "red" */
} else {
userList[i].style["background-color"] = "blue";
}
}
}
window.onload = setColors;
</script>
</body>
</html>我在这里错过了什么？
最佳答案
正如控制台中的错误所说，您在 for 循环中遗漏了 ;。添加它，它就起作用了。
请注意，我还简化了您的 isEven() 函数。作为@Nathan提到过，您还可以通过删除此函数并直接在 if 语句上测试它来使其更简单。
function isEven(value) {
return (value % 2 == 0);
}
function setColors() {
var userList = document.getElementsByClassName("testclass");
var i;
for (i = 0; i < userList.length; i++) { // <-- /!\ Here /!\
if (isEven(i)) {
userList[i].style["background-color"] = "red";
} else {
userList[i].style["background-color"] = "blue";
}
}
}
window.onload = setColors;.testclass {
width: 100%;
height: 10px;
background-color: #fdc345;
}<div class="testclass"></div>
<div class="testclass"></div>
<div class="testclass"></div>
<div class="testclass"></div>关于javascript - div 上的交替背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45942234/