Alternate Background Colours

To make it easier for your visitors to visually separate similar elements in your web page (such as table rows, paragraphs, list items etc), you can give alternate elements a different background colour. You can achieve this using a server-side script but here’s a really simple way to do this using JavaScript.

You can see an example here.

First, let’s have a look at some basic html. This is just a series of paragraphs nested inside a div.

html

<div id="para_container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec ipsum eu felis commodo porttitor in at massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec ipsum eu felis commodo porttitor in at massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec ipsum eu felis commodo porttitor in at massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec ipsum eu felis commodo porttitor in at massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec ipsum eu felis commodo porttitor in at massa.</p>
</div>

For the JavaScript, we start by creating a function which takes 3 parameters. This sets up the containing element (container), the elements we wish to alternate (el) and the class name which we’ll use with our css(colourclass).

javascript

function alternate(container,el,colourclass)  {
    var container = document.getElementById(container);
    var els = container.getElementsByTagName(el);
    var bgColourStyle = colourclass;
}

We then loop through the array of elements(els) and target every ‘even’ element by using the modulus operator.

for (var i = 0; i < els.length; i++) {
    if (i % 2 == 0) {

Now, we add our class name to the element. But before doing that, we need to check if the element has any other classes applied to it. If the element does have other classes, we append our class name at the end of the class values. If we didn’t perform this check, any other classes would be overwritten.

if (els[i].className == '') {
    els[i].className = bgColourStyle;
} else {
    els[i].className += ' '+ bgColourStyle;
}

We can then call this function on page load. Our complete javascript would look like this:

Complete JavaScript

function alternate(container,el,colourclass)  {
    var bgColourStyle = colourclass;
    var container = document.getElementById(container);
    var els = container.getElementsByTagName(el);
	for (var i = 0; i < els.length; i++) {
	    if(i % 2 == 0) {
                if (els[i].className == '') {
		    els[i].className = bgColourStyle;
		} else {
		    els[i].className += ' '+ bgColourStyle;
		}
	    }
        }
}
window.onload = function () {
alternate('para_container','p','alt3');
}

Finally we need to specify a css rule for the class ‘alt3′:

css

.alt3 {background:#ccc;}

You can see an example here.

Category: CSS, Javascript // 4 CommentsOpen my Lovebox

4 Responses to “Alternate Background Colours”

Scott S - Jun 10, 2009 at 1:14 am

Hmmmm… I wonder where you got the idea for this…

For those of your visitors using jQuery, it can be done using the built in “addClass” like so:

$(document).ready(function() { $(".zebra tr:even").addClass("alt"); });

Once again, a nice article Consider it dugg!
ErisDS - Jun 10, 2009 at 12:32 pm

I’ve seen this done in other ways but it’s nice to see an unobtrusive, progressive enhancement style version. I’m doing my best to learn javascript atm & this kind of “quick trick snippet” is really quite inspiring, thanks!
ElanMan - Jun 10, 2009 at 4:07 pm

Thanks for the comments
@Scott Haha! The frameworks like jquery certainly do make this kind of thing a doddle but if you’re just after a couple of quick functions, they aren’t really worth it imo.

@Eris Thanks for the nice words! I’m sure it won’t take you long to grok javascript. ‘Simply Javascript’ by Sitepoint is a good read
Wizely - Jun 17, 2009 at 8:53 pm

Like Eris I’ve been getting my hands mucky in a bit of Javascript here and there – sure the libraries are powerful and easy but I always like to know how things work. So thanks for going through these ’simple’ walkthroughs – they are very clear and do help… I love peering into your drawers!

RSS

ElanMan