最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Change background-colour of div for each new div created - Stack Overflow

programmeradmin3浏览0评论

I have a loop that creates a new div for each unique event

while($event!=$nextEvent){

echo'<div id='sportType'>';
//some code
echo'</div>'
}

I would like to automatically change the background-colour to a different background-colour for each created div, each div must be a separate/unique colour, there will never be more than 7 divs

Something like this

Any idea how I can do this?

I have a loop that creates a new div for each unique event

while($event!=$nextEvent){

echo'<div id='sportType'>';
//some code
echo'</div>'
}

I would like to automatically change the background-colour to a different background-colour for each created div, each div must be a separate/unique colour, there will never be more than 7 divs

Something like this

Any idea how I can do this?

Share Improve this question asked May 16, 2015 at 12:33 user4868041user4868041 1
  • 2 FYI, IDs must be unique on document context, you are generating invalid HTML markup – A. Wolff Commented May 16, 2015 at 13:18
Add a ment  | 

3 Answers 3

Reset to default 5

Since there is at most 7 divs, you can do this with pure css and the nth-child selector

div:nth-child(1) {
    background: gray;
}
div:nth-child(2) {
    background: red;
}
div:nth-child(3) {
    background: cyan;
}
div:nth-child(4) {
    background: blue;
}
div:nth-child(5) {
    background: black;
}
div:nth-child(6) {
    background: green;
}
div:nth-child(7) {
    background: yellow;
}

If you desire more than seven divs, it will be more practical with javascript like

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

for(var i =0; i < divs.length; i++){
divs[i].style.background = getRandomColor();
}
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>

Random color generator in JavaScript

You can do it in PHP itself as follows

Declare an array which contains the colour codes and use the array when you create the <div>s dynamically.See the below code as an example

<?php $color= array("#341014", "#BE6353", "#2F2E3B","#20222B","#BB644C","#F8834E","#E4B9AC"); 
$i=0;
while($event!=$nextEvent){
   echo"<div id='sportType' style='background-color:".$color[i].";'>";
   //some code
   echo'</div>';
   $i++;
}
?>

You can just specify any number of colours in the array and it will apply the colours accordingly even if a large number of <div> is created,ie for eg if you want 100 divs to be created, you can just add 100 or more than 100 colour codes in your array and these colours will be used in the while loop.

you can use the function rand to generate new colors

while($event!=$nextEvent){
$r=rand(0, 255);
$g=rand(0, 255);
$b=rand(0, 255);
echo"<div id=\"sportType\" style=\"backgroung:rgb($r,$g,$b);\">";
//some code
echo "</div>"
}

rand function will creat a random number to the RGB color collection.

发布评论

评论列表(0)

  1. 暂无评论