如何使用 JavaScript 在 CSS 网格布局中将每一列设置为不同的颜色

Question

我正在尝试找出一种方法来定位布局中的每一列并为每一列设置不同的颜色。我当前实施的最佳方法是什么。任何帮助，将不胜感激。

每列应该是不同的颜色。

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

function makeRows(rows, cols) {

  container.style.setProperty("--grid-rows", rows);

  container.style.setProperty("--grid-cols", cols);

  for (c = 0; c < rows * cols; c++) {

    let cell = document.createElement("div");

    cell.innerText = c + 1;

    container.appendChild(cell).className = "grid-item";

  }

}

makeRows(16, 16);

#container {

  display: grid;

  grid-template-rows: repeat(var(--grid-rows), 1fr);

  grid-template-columns: repeat(var(--grid-cols), 1fr);

}

.grid-item {

  padding: 1em;

  border: 1px solid #ddd;

  text-align: center;

  height: 100px;

  width: 100px;

}

<div id="container"></div>

Answer 1

您可以在创建网格元素的循环中设置颜色，使用c % cols: 获取列号（注意columnColors参数和倒数第二行）function makeRows(rows, cols, columnColors) {&nbsp; container.style.setProperty("--grid-rows", rows);&nbsp; container.style.setProperty("--grid-cols", cols);&nbsp; for (c = 0; c < rows * cols; c++) {&nbsp; &nbsp; let cell = document.createElement("div");&nbsp; &nbsp; cell.innerText = c + 1;&nbsp; &nbsp; cell.style.backgroundColor = columnColors[c % cols];&nbsp; &nbsp; container.appendChild(cell).className = "grid-item";&nbsp; }}

Answer 2

你可以试试这个：通过访问其属性设置cell背景颜色style随机颜色'#' + Math.random().toString(16).substring(2, 6)（substring从 2 到删除0.）const container = document.getElementById("container");function makeRows(rows, cols) {&nbsp; container.style.setProperty("--grid-rows", rows);&nbsp; container.style.setProperty("--grid-cols", cols);&nbsp; for (c = 0; c < rows * cols; c++) {&nbsp; &nbsp; let cell = document.createElement("div");&nbsp; &nbsp; cell.innerText = c + 1;&nbsp; &nbsp; cell.style['background-color'] = '#' + Math.random().toString(16).substring(2, 6)&nbsp; &nbsp; container.appendChild(cell).className = "grid-item";&nbsp; }}makeRows(16, 16);#container {&nbsp; display: grid;&nbsp; grid-template-rows: repeat(var(--grid-rows), 1fr);&nbsp; grid-template-columns: repeat(var(--grid-cols), 1fr);}.grid-item {&nbsp; padding: 1em;&nbsp; border: 1px solid #ddd;&nbsp; text-align: center;&nbsp; height: 100px;&nbsp; width: 100px;}<div id="container"></div>

Answer 3

const container = document.getElementById("container");&nbsp;&nbsp;function makeRows(rows, cols) {&nbsp; container.style.setProperty("--grid-rows", rows);&nbsp; container.style.setProperty("--grid-cols", cols);&nbsp; let colorArray = []&nbsp; for (let index = 0; index < cols; index++) {&nbsp; &nbsp; colorArray.push(getRandomColor());&nbsp; }&nbsp; for (c = 0; c < rows * cols; c++) {&nbsp; &nbsp; let cell = document.createElement("div");&nbsp; &nbsp; cell.innerText = c + 1;&nbsp; &nbsp; container.appendChild(cell).className = "grid-item";&nbsp; &nbsp; cell.style.backgroundColor = `&nbsp; &nbsp; &nbsp; rgb(${colorArray[c % cols].r}, ${colorArray[c % cols].g}, ${colorArray[c % cols].b})&nbsp; &nbsp; `;&nbsp; }}function getRandomColor(){&nbsp; let r = Math.round(Math.random() * 255);&nbsp; &nbsp; let g = Math.round(Math.random() * 255);&nbsp; &nbsp; let b = Math.round(Math.random() * 255);&nbsp; &nbsp; let color = {&nbsp; &nbsp; &nbsp; "r" : r,&nbsp; &nbsp; &nbsp; "g" : g,&nbsp; &nbsp; &nbsp; "b" : b&nbsp; &nbsp; };&nbsp;&nbsp;&nbsp; return color;}makeRows(16, 16);#container {&nbsp; display: grid;&nbsp; grid-template-rows: repeat(var(--grid-rows), 1fr);&nbsp; grid-template-columns: repeat(var(--grid-cols), 1fr);}.grid-item {&nbsp; padding: 1em;&nbsp; border: 1px solid #ddd;&nbsp; text-align: center;&nbsp; height: 100px;&nbsp; width: 100px;}<div id="container"></div>