我正在嘗試使用 JavaScript for 回圈自動生成 4 x 4 CSS 網格。除了淺藍色背景外，沒有出現任何網格專案。我在兩個單獨的 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;
}
uj5u.com熱心網友回復：
在 CSS 中，將您設定的屬性從 class 更改為 id
item.setAttribute("id", "grid-item");
因為在 css 中，當您使用 # 時，它的意思是 ID，但是當您使用 . 它的平均類
參考：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/449281.html
標籤：javascript html css dom CSS网格
上一篇：如何更改引導程式中具有特定類的表格行的懸停背景顏色？
下一篇：顯示鋸齒形的Css線性漸變