小贝子编程

我正在尝试使用脚本和 css 创建一个网格来为其着色



我是新的javascript和web开发在它的整体，但我试图使用javascript来创建一个网格，而不必在我的代码中键入256div。

我想达到的目标

我的问题是，脚本不添加div到我的网格容器。如果我手动添加一个div，但是，它变成正确的颜色和大小。

抱歉，如果有什么不清楚的地方，这是我在这个网站上的第一篇文章。

任何帮助将不胜感激!谢谢你！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsiv_Design/CSS_3</title>
<link rel="stylesheet" href="stylesheet.css">
<script src="script.js"></script>
</head>
<body>
<div id="grid-container"></div>
</body>
</html>

CSS

#grid-container{
width: 100vw;
display: grid;
text-align: center;
grid-template-columns: repeat(16, 2vw);
gr
id-template-rows: repeat(16, 2vw);
justify-content: center;
grid-gap: 0.3vw;
}
.square{
height: 100%;
width: 100%;
}
.square:nth-child(3n - 2){
background-color: rgb(231, 142, 7);
}
.square:nth-child(3n -1){
background-color: peachpuff;
}
.square:nth-child(3n){
background-color: chocolate;
}

JS

var rows = 16;
var columns = 16;
for (i = 0; i < rows * columns; i++)
{
var square = document.createElement('div');
square.classList.add('square');
document.getElementById('grid-container').appendChild(square);
}

我没有足够的代表来评论;但我只是想告诉你开始使用const/let而不是var。我知道一开始会很奇怪;但你终究会喜欢它的。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium