使用 Javascript 和 CSS 网格

Question

我正在尝试使用 JavaScript for 循环自动生成 4 x 4 CSS 网格。 None 个网格项目出现，浅蓝色背景除外。我在两个单独的 for 循环中使用 appendChild() 和 setAttribute() 函数：一个用于行，一个用于列。 HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
        <div class="grid-container" id="grid">
        </div>
    <script src="script.js"></script>
  </body>
</html>

JS:

const grid = document.getElementById("grid");

for(let i = 1; i < 5; i++)
{
    for(let x = 1; x < 5; x++)
    {
        var item = document.createElement("div");
        //item.setAttribute("style", "grid-area:" + i + " / " + x + " / " + i + " / " + x);
        item.setAttribute("grid-column", x + " / span 1");
        item.setAttribute("grid-row", i + " / span 1");
        item.setAttribute("class", "grid-item");
        grid.appendChild(item);
    }
}

CSS:

.grid-container {
    display: grid;
    /*width: 50%;
    height: 100%;*/
    grid-template-columns: 30px 30px 30px 30px;
    grid-template-rows: 30px 30px 30px 30px;
    gap: 10px;
    background-color: lightblue;
}

#grid-item {
    background-color: blue;
    border-style: solid;
  border-width: 5px;
    border-color: red;
}

Answer 1

在 CSS 中将您的设置属性从 class 更改为 id

item.setAttribute("id", "grid-item");

因为在 css 中，当您使用 # 时，它的意思是 ID 但当您使用 .它的平均值 Class

参考：https://www.w3schools.com/cssref/css_selectors.asp

Answer 2

您只需将 css for grid-item 从 id 选择器更改为 class 选择器。即，

.grid-item {
    background-color: blue;
    border-style: solid;
  border-width: 5px;
    border-color: red;
}

使用 Javascript 和 CSS 网格

Using Javascript with CSS Grid

javascript

html

css

dom

css-grid