如何给出一些div随机背景色?

时间:2017-12-12 23:18:29

标签: jquery

我的网页div中有几个.tg-item-inner,现在我想给他们每个随机的背景颜色。有我的jquery代码:

var color = '#'+Math.floor(Math.random()*16777215).toString(16);
$(".tg-item-inner").css("background-color",color);

这将有效。但所有的div都有一种颜色。我希望每个人都有不同的颜色

1 个答案:

答案 0 :(得分:1)

在以十六进制设置颜色时,您需要在其前面加上哈希#

var randomColor = Math.floor(Math.random() * 16777215).toString(16);
$(".tg-item-inner").css('background-color', "#" + randomColor);
.tg-item-inner {
  height: 50px;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tg-item-inner'></div>

编辑:每种不同的颜色

$.each($(".tg-item-inner"), function(idx, elem) {
  var randomColor = Math.floor(Math.random() * 16777215).toString(16);
  $(elem).css('background-color', "#" + randomColor);
});
.tg-item-inner {
  display: inline-block;
  height: 50px;
  width: 50px;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tg-item-inner'></div>
<div class='tg-item-inner'></div>
<div class='tg-item-inner'></div>
<div class='tg-item-inner'></div>