Striped list (javascript)

Here, the javascript goes through each list item and adds a class name - '.odd' or '.even' - to each one. The style of those classes is set in the CSS.

Of course, this could be used for tables too. You'd just have to change the tag name in the function to 'tr'.

  1. One
  2. Two
  3. Three
  4. Four
  5. Five
Javascript
function stripedList(list) {
var items=document.getElementById(list).getElementsByTagName('li');
for (i=0; i<items.length; i++) {
if ((i%2)?false:true) {
items[i].className+=" odd";
}
else {
items[i].className+=" even";
}
}
}
window.onload=function() {stripedList('list');};
HTML
<div id="stripedlist">
<h1>Striped list (javascript)</h1>
<p>Here, the javascript goes through each list item and adds a class name - '.odd' or '.even' - to each one. The style of those classes is set in the CSS.</p>
<p>Of course, this could be used for tables too. You'd just have to change the tag name in the function to 'tr'.</p>
<ol id="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ol>
</div>
CSS
.odd {
background-color:red;
}
.even {
background-color:blue;
}
ol#list {
width:7em;
margin:auto;
list-style:none;
text-align:center;
}
ol#list li {
height:1.5em;
line-height:1.5em;
color:white;
font-weight:bold;
}

Comments

#1
2013-01-24 IPCUS says :

can the same be done for other things e.g. headings ?

#2
2013-01-25 BonRouge says :

Sure. Why not? Try it out and see how it goes.

Comment form

Please type the word 'wolf' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url