rangana
250+ Club
Joined: 27 Feb 2008
Posts: 271
Location: Cebu City Philippines
|
 Posted: Wed Apr 23, 2008 6:12 am Post subject: Change Element's className |
 |
|
This script enables you to change the className of any element 
| Code: |
<script type="text/javascript">
window.onload = function()
{
var obj=document.getElementById('link').getElementsByTagName('a');
for(var start=0;start<obj.length;start++)
{
obj[start].onclick=function()
{
this.className = (this.className != 'on')? 'on': 'off';
}
}
}
</script>
|
It's full implementation could be best explained with a complete script 
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a{display:block;width:100px;line-height:30px;color:#2d2d2d;font-family:Tahoma;font-size:10pt;margin:1px;text-align:center;}
#link{width:104px;margin:10px auto;border:3px double #2d2d2d;padding:10px;}
.on {background-color:#9c0;}
.off {background-color:#69c;}
</style>
<script type="text/javascript">
window.onload = function()
{
var obj=document.getElementById('link').getElementsByTagName('a');
for(var start=0;start<obj.length;start++)
{
obj[start].onclick=function()
{
this.className = (this.className != 'on')? 'on': 'off';
}
}
}
</script>
</head>
<body>
<div id="link">
<a href="#" id="link_111" class="on">On</a>
<a href="#" id="link_222" class="off">Link 2</a>
<a href="#" id="link_333" class="off">Link 3</a>
</div>
</body>
</HTML>
|
|
|
