javascript - Select css style from group of styles -

javascript - Select css style from group of styles -

i generating div each entry in database.

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

what want select color in div class random supose defining color's within array.

i hoping solution less or sass or should utilize js ?

you can utilize javascript function generates random color:

function getcolor() { var r = math.floor(math.random() * 256); var g = math.floor(math.random() * 256); var b = math.floor(math.random() * 256); homecoming "#"+ r.tostring(16) + g.tostring(16) + b.tostring(16) ; }

and utilize js dom (or jquery) alter css background-color attribute of each div:

var divs = document.getelementsbytagname("div"); for(var = 0; < divs.length; i++) { divs.item(i).style.backgroundcolor = getcolor(); divs.item(i).innerhtml = getcolor(); }

see jsfiddle

update: can phone call method within less using backticks have access underlying javascript processor (i'm not sure if work in non-javascript less implementations such less4j, since it's not documented feature). mixin:

.generatecolor() { @color: color(`"#" + (math.random()*0xffffff<<0).tostring(16)`); }

will set @color variable randomly generated color. can utilize in selector block:

.db-color-1 { .generatecolor(); background-color: @color; } .db-color-2 { .generatecolor(); background-color: @color; } .db-color-3 { .generatecolor(); background-color: @color; }

and each class have (hopefully) different color.

javascript html sass less