第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何使用 JavaScript 在 CSS 網(wǎng)格布局中將每一列設(shè)置為不同的顏色

如何使用 JavaScript 在 CSS 網(wǎng)格布局中將每一列設(shè)置為不同的顏色

神不在的星期二 2023-03-03 14:59:02
我正在嘗試找出一種方法來(lái)定位布局中的每一列并為每一列設(shè)置不同的顏色。我當(dāng)前實(shí)施的最佳方法是什么。任何幫助，將不勝感激。每列應(yīng)該是不同的顏色。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貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超6個(gè)贊

您可以在創(chuàng)建網(wǎng)格元素的循環(huán)中設(shè)置顏色，使用c % cols: 獲取列號(hào)（注意columnColors參數(shù)和倒數(shù)第二行）


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";

  }

}


查看完整回答
反對(duì) 回復(fù) 2023-03-03
?
慕尼黑8549860

TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超11個(gè)贊

你可以試試這個(gè)：

  • 通過(guò)訪問(wèn)其屬性設(shè)置cell背景顏色style

  • 隨機(jī)顏色'#' + 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;

}

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


查看完整回答
反對(duì) 回復(fù) 2023-03-03
?
蕪湖不蕪

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超7個(gè)贊

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;

}

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


查看完整回答
反對(duì) 回復(fù) 2023-03-03
  • 3 回答
  • 0 關(guān)注
  • 209 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)