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.

#3
2022-08-27 NbfyBossy says :

table of contents thesis <a href="https://thesismethod.com/ ">thesis examples for research papers</a> thesis statement about teenage pregnancy

#4
2022-08-28 Execglavy says :

states synonym for essay <a href="https://essaymerino.com/ ">how long is a 1000 word essay</a> driving essay

#5
2022-09-28 WbzwWhits says :

hydrochlorothiazide vs furosemide for edema <a href="https://lasixona.com/ ">furosemide dog dosage</a> furosemide drugs

Comment form

Please type the word 'brown' here:

BB code available :

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