To change color of your div element randomly all you need is to specify same class on your div elements so the jquery selector can select those elements you want to randomly change the color.
<blockquote>&lt;div class=”div-class” style=”width: 100%; height: 20px;”&gt;Div 1&lt;/div&gt;

&lt;div class=”div-class” style=”width: 100%; height: 20px;”&gt;Div 2&lt;/div&gt;

&lt;div class=”div-class” style=”width: 100%; height: 20px;”&gt;Div 3&lt;/div&gt;

&lt;div class=”div-class” style=”width: 100%; height: 20px;”&gt;Div 4&lt;/div&gt;

&lt;div class=”div-class” style=”width: 100%; height: 20px;”&gt;Div 5&lt;/div&gt;</blockquote>
&nbsp;

With this as example we can see that we have here 5 elements with same class which make us easier to access each of those elements. Now to be able to set random colors we need to use <strong><a href=”http://jquery.com/”>JQuery</a>.</strong>

&nbsp;
<blockquote>&lt;script&gt;

var setOfColors = [“#d4d4d4”, “#333”, “#222”, “#111”];

jQuery(‘.div-class’).each(function(indx,thisObj){

console.log(setOfColors.lenght)

jQuery(thisObj).css(‘background-color’,setOfColors[parseInt(Math.floor(Math.random()*setOfColors.length))]);

});

&lt;/script&gt;

&nbsp;</blockquote>
Dont forget to include jQuery plugin on your header or somewhere above your code.
&lt;script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”&gt;&lt;/script&gt;

&nbsp;

<strong>Screenshots:</strong>

screenshot1

screenshot2

Share on Google+Tweet about this on TwitterShare on FacebookShare on TumblrShare on StumbleUponPin on PinterestShare on LinkedInDigg thisShare on RedditEmail this to someone