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'.
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;
}
Sure. Why not? Try it out and see how it goes.
can the same be done for other things e.g. headings ?