https:/codepen.iosristi27penmdejzrv这是我的codepen文件的链接,我也添加了jQuery,但JS部分没有在实时视图中显示。
var square=document.querySelectorALL(".squares");
var colors=["rgb(255, 0, 0)","rgb(255, 255, 0)","rgb(0, 0, 255)","rgb(0, 255, 0)","rgb(255, 0, 255)","rgb(0, 255, 255)"];
for(var i=0;i<square.length;i++){
square[i].style.backgroundColor = "blue";
}
你有一个错别字:querySelectorALL应该是querySelectorAll。
我们需要删除 dot
从 getElementsByClassName
功能,我们开始了。
这里是它的链接。
var square=document.getElementsByClassName("squares");
var colors=["rgb(255, 0, 0)","rgb(255, 255, 0)","rgb(0, 0, 255)","rgb(0, 255, 0)","rgb(255, 0, 255)","rgb(0, 255, 255)"];
for(var i=0;i<square.length;i++){
square[i].style.backgroundColor = "blue";
}
body{
background-color:grey;
text-align:center;
}
.squares{
width:30%;
background:purple;
float:left;
padding-bottom:30%;
margin:1.66%;
}
#container{
margin:0 auto;
max-width:600px;
}
<html>
<head><title>color grading</title>
</head>
<body>
<h1>The Great RGB Game</h1>
<div id="container">
<div class="squares"></div>
<div class="squares"></div>
<div class="squares"></div>
<div class="squares"></div>
<div class="squares"></div>
<div class="squares"></div>
</div>
</body>
</html>