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。

您可以生成随机颜色或创建颜色数组，然后按顺序或随机选择颜色。

＆＃13;

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();
}

＆＃13;

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

＆＃13;

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

＆＃13;

要为所有.box提供特定颜色，您可以将颜色放入数组中，并使用i变量使用每种颜色依次选择颜色。

＆＃13;

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];
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

用于颜色生成器的Paul Irish帖子：

$('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+ divs与单独的颜色仅限CSS

2 个答案: