首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >颜色元素给出一个颜色数组

颜色元素给出一个颜色数组
EN

Stack Overflow用户
提问于 2016-01-24 02:48:41
回答 2查看 4.8K关注 0票数 3

如何将这组颜色分配给一组div?

代码语言:javascript
运行
复制
var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'];

我知道我可以通过从数组中随机选择颜色来做到这一点:

代码语言:javascript
运行
复制
var random_color = colors[Math.floor(Math.random() * colors.length)];
$("div").css('background-color', random_color);

但是它使用了很多相同的颜色,我需要它们更多的分布。如何按顺序从数组中的第一个颜色开始分配到最后,然后再返回到第一个呢?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-01-24 03:00:08

您可以完成它,循环元素和调制索引的列表长度。

代码语言:javascript
运行
复制
var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'];
var divs = $('div');


for (var i = 0; i < divs.length; i++) {
    var color = colors[i % colors.length];

    $(divs[i]).css('background-color', color);
};

JSFiddle

或者更简洁一些的上面的版本:

代码语言:javascript
运行
复制
var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'];

// selecting the <div> elements, and chaining with the css()
// method; using that method to update the specified -
// 'background-color' - property using the anonymous function
// from which we use the index of the <div> in from the jQuery
// collection:
$('div').css('background-color', function (index) {

  // using the index to determine which color should
  // be retrieved, and returning it as the value
  // to set as the background-color. This approach
  // iterates over each element in the collection
  // and returns the appropriate value to each of
  // those elements:
  return colors[index % colors.length];
});

代码语言:javascript
运行
复制
var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'];
$('div').css('background-color', function(index) {
  return colors[index % colors.length];
});
代码语言:javascript
运行
复制
div {
  width: 50px;
  height: 50px;
  margin-bottom: 0.5em;
  border: 1px solid #000;
}
代码语言:javascript
运行
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

JS Fiddle演示

或者,使用DOM:

代码语言:javascript
运行
复制
// using an Immediately-Invoked Function Expression ("IIFE")
// in order that the function is executed when encountered,
// and doesn't require being called later:
(function (){
  var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'],

      // creating an Array from the collection returned by
      // document.querySelectorAll():
      divs = Array.from( document.querySelectorAll('div') );

  // iterating over that array of <div> elements, using
  // Array.prototype.forEach()
  divs.forEach( function (div, index) {
  // 'div' is the array-element of the Array over which
  // we're iterating,
  // 'index' is the index of that array-element in the
  // Array over which we're iterating.

    // setting the background-color style of each <div>
    // to the color retrieved from the Array:
    div.style.backgroundColor = colors[ index % colors.length ];
  });
})();

代码语言:javascript
运行
复制
(function() {
  var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'],

    divs = Array.from(document.querySelectorAll('div'));
  divs.forEach(function(div, index) {
    div.style.backgroundColor = colors[index % colors.length];
  });
})();
代码语言:javascript
运行
复制
div {
  width: 50px;
  height: 50px;
  margin-bottom: 0.5em;
  border: 1px solid #000;
}
代码语言:javascript
运行
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

JS Fiddle演示

使用DOM和Arrow函数:

代码语言:javascript
运行
复制
// using an Immediately-Invoked Function Expression ("IIFE")
// in order that the function is executed when encountered,
// and doesn't require being called later:
(function (){
  var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'],

      // creating an Array from the collection returned by
      // document.querySelectorAll():
      divs = Array.from( document.querySelectorAll('div') );

  // iterating over that array of div elements, as above;
  // the arguments in brackets are, again, the Array-element
  // from the Array, and its index in the Array. 
  // the right-hand side of the Arrow Function is exactly
  // as above:
  divs.forEach( (div, index) => div.style.backgroundColor = colors [ index % colors.length ]);
})();

代码语言:javascript
运行
复制
(function() {
  var colors = ['#2d335b', '#535b2d', '#494949', '#d7d7d7', '9ad4ce'],

    divs = Array.from(document.querySelectorAll('div'));
  divs.forEach((div, index) => div.style.backgroundColor = colors[index % colors.length]);
})();
代码语言:javascript
运行
复制
div {
  width: 50px;
  height: 50px;
  margin-bottom: 0.5em;
  border: 1px solid #000;
}
代码语言:javascript
运行
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

JS Fiddle演示

票数 4
EN

Stack Overflow用户

发布于 2016-01-24 02:56:49

实际上,您可以使用范围内的值步骤来防止2种颜色接近。要完成您所要求的操作,您可以设置一个currentColor值,并在每次设置颜色时增加它。当使用数组中的元素(而不是随机数)时,可以使用currentColor作为索引。然后,您可以根据数组长度对结果进行建模,这样它就循环了。

代码语言:javascript
运行
复制
var currentColor = 0;
var colorArray = [1,2,3,4,5,6];

for(var i=0;i<colorArray.length*3;i++) {
  // When setting the color increment currentColor value
  document.write(colorArray[currentColor]); // This would actually be where you set the color based on the current color index
  currentColor = (currentColor + 1)%colorArray.length;
}

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34971671

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档