Question

我为数据库中的每个条目生成Div。

<div class='db-green'>Sample Code</div>
<div class='db-blue'>Sample Code</div>
<div class='db-blue'>Sample Code</div>
<div class='db-yellow'>Sample Code</div>

我想要的是通过定义数组内部的颜色来随机选择Div类中的颜色。

我希望使用Less或sass的解决方案，还是应该使用JS？

Answer 1

解决类似于您提出的问题的解决方案：randomly display a div class using JQuery

您可以使用jQuery为随机div元素定义颜色：

var divs = ['.db-green', '.db-blue', '.db-yellow']; // possible divs
var color = ["blue", "yellow", "red"]; // potential colors
var random = Math.floor(Math.random() * divs.length);
var entry = divs[random];
$(entry).css("color", color[0]);

Answer 2

您可以使用生成随机颜色的JavaScript函数：

function getColor() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);

    return "#"+ r.toString(16) + g.toString(16) + b.toString(16) ;
}

然后使用JS DOM（或JQuery）更改每个background-color的CSS div属性：

var divs = document.getElementsByTagName("div");

for(var i = 0; i < divs.length; i++) {
    divs.item(i).style.backgroundColor = getColor();
    divs.item(i).innerHTML = getColor();
}

参见 JSFiddle

UPDATE ：你也可以调用类似的方法使用反引号来访问基础JavaScript处理器（我不确定这是否可以在非JavaScript Less实现，例如less4j，因为它不是一个记录的功能）。这个混合：

.generateColor() { 
    @color: color(`"#" + (Math.random()*0xFFFFFF<<0).toString(16)`);
}

会将@color变量设置为随机生成的颜色。然后，您可以在选择器块中使用它：

.db-color-1 {
    .generateColor();
    background-color: @color;
}

.db-color-2 {
    .generateColor();
    background-color: @color;
}

.db-color-3 {
    .generateColor();
    background-color: @color;
}

每个班级都会（希望）有不同的颜色。

从一组样式中选择css样式

2 个答案: