首頁猿問如何使用 JavaScript 在...

如何使用 JavaScript 在 CSS 網格布局中將每一列設置為不同的顏色

JavaScript

神不在的星期二 2023-03-03 14:59:02

我正在嘗試找出一種方法來定位布局中的每一列并為每一列設置不同的顏色。我當前實施的最佳方法是什么。任何幫助，將不勝感激。每列應該是不同的顏色。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>

查看完整描述

3 回答

胡子哥哥

TA貢獻1825條經驗獲得超6個贊

您可以在創建網格元素的循環中設置顏色，使用c % cols: 獲取列號（注意columnColors參數和倒數第二行）

function makeRows(rows, cols, columnColors) {

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;

cell.style.backgroundColor = columnColors[c % cols];

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

}

反對回復 2023-03-03

慕尼黑8549860

TA貢獻1818條經驗獲得超11個贊

你可以試試這個：

通過訪問其屬性設置cell背景顏色style
隨機顏色'#' + Math.random().toString(16).substring(2, 6)（substring從 2 到刪除0.）

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;

cell.style['background-color'] = '#' + Math.random().toString(16).substring(2, 6)

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;

}

反對回復 2023-03-03

蕪湖不蕪

TA貢獻1796條經驗獲得超7個贊

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

function makeRows(rows, cols) {

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

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

let colorArray = []

for (let index = 0; index < cols; index++) {

colorArray.push(getRandomColor());

}

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

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

cell.innerText = c + 1;

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

cell.style.backgroundColor = `

rgb(${colorArray[c % cols].r}, ${colorArray[c % cols].g}, ${colorArray[c % cols].b})

}

function getRandomColor(){

let r = Math.round(Math.random() * 255);

let g = Math.round(Math.random() * 255);

let b = Math.round(Math.random() * 255);

let color = {

"r" : r,

"g" : g,

"b" : b

};

return color;

}

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;

}

反對回復 2023-03-03

3 回答
0 關注
198 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用 JavaScript 在 CSS 網格布局中將每一列設置為不同的顏色

如何使用 JavaScript 在 CSS 網格布局中將每一列設置為不同的顏色

3 回答

添加回答