我怎样才能轻松地为 50 多个具有不同颜色的 div 设置背景色 | CSS只

Question

我正在尝试一些东西，它有超过 50 个 div 并且 我希望每个 div 的背景颜色具有单独的颜色。 他们有什么方法或技巧可以快速做到吗或我需要一个一个地做..

这是我的代码：

<head>
<style>
box{
  position: relative;
  display: inline-block;
  width: 20%;
  height: 25%; 
  border:none;
}
</style>
</head>
<body>

<box></box>
<box></box>
<box></box>
<box></box>
<box></box>
<box></box>
<box></box>
<!--and more box box box...-->

</body>

Answer 1

使用JavaScript.

您可以生成随机颜色或创建颜色数组并按顺序或随机选择一种颜色。

var box = document.getElementsByClassName('box');
// An array we need to generate a random hex value.
var all = ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F']

// Function that will return a random element from the array 'all'
function rand() {
  return all[Math.floor(Math.random() * all.length)];
}

// Loop through all '.box' elements
for (i = 0; i < box.length; i++) {
  // Call the function 'rand()' six times to generate a valid hex value(#000000) and
  // assign the new hex value to currently iterated '.box' element's 'backgroundColor'
  box[i].style.backgroundColor = '#' + rand() + rand() + rand() + rand() + rand() + rand();
}

.box{
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

要为所有 .boxes 指定特定颜色，您可以将颜色放入一个数组中，然后使用 i 变量依次选择颜色来使用每种颜色。

var box = document.getElementsByClassName('box');
var colors = ['coral', 'blueviolet', 'burlywood', 'cornflowerblue', 'crimson', 'darkgoldenrod', 'olive', 'sienna', 'red', 'green', 'purple', 'black', 'orange', 'yellow', 'maroon', 'grey', 'lightblue', 'tomato', 'pink', 'maroon', 'cyan', 'magenta', 'blue', 'chocolate', 'darkslateblue', 'coral', 'blueviolet', 'burlywood', 'cornflowerblue', 'crimson', 'darkgoldenrod']

for (i = 0; i < box.length; i++) {
  box[i].style.backgroundColor = colors[i];
}

.box{
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Answer 2

使用 Paul Irish post 作为颜色生成器：

$('box').each(function() {
  var bg = '#' + (function co(lor){   return (lor +=
  [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'][Math.floor(Math.random()*16)])
  && (lor.length == 6) ?  lor : co(lor); })('');
  $(this).css({'background-color': bg});
});

box{
  position: relative;
  display: inline-block;
  width: 20%;
  height: 25%; 
  border:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>
<box>box</box>

我怎样才能轻松地为 50 多个具有不同颜色的 div 设置背景色 | CSS只

how can i background-color 50+ divs with separate colors easily | CSS only

html

css