I've scoured the w3schools site for an answer, and I haven't found one for this question: If you change an element's properties with HTML DOM, is it possible to change its properties back to the default? For instance, in the following example, I'm trying to add some dynamics to links by altering the background and border properties, so when a user clicks one link the background/border properties change. But, when the user clicks a different link, I want the other links to default back to their original properties. Does this make sense? Right now, I've tried adding more code to resemble the original CSS properties for "a", but it negates the hover properties. I'm getting quite frustrated. If there is a way to just reset an element to its original setting, this would be monumentally simpler. Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><script type="text/javascript"><!--function resetFontSize() { document.getElementById("text").style.fontSize="10px"; document.getElementById("nav01").blur(); document.getElementById("nav01").style.border="1px inset #666666"; document.getElementById("nav01").style.background="dodgerblue"; document.getElementById("nav02").style.border="1px inset transparent"; document.getElementById("nav02").style.background="#666666"; document.getElementById("nav03").style.border="1px inset transparent"; document.getElementById("nav03").style.background="#666666"; }function setFontSmaller() { document.getElementById("text").style.fontSize="9px"; document.getElementById("nav02").blur(); document.getElementById("nav02").style.border="1px inset #666666"; document.getElementById("nav02").style.background="dodgerblue"; document.getElementById("nav01").style.border="1px inset transparent"; document.getElementById("nav01").style.background="#666666"; document.getElementById("nav03").style.border="1px inset transparent"; document.getElementById("nav03").style.background="#666666"; }function setFontLarger() { document.getElementById("text").style.fontSize="14px"; document.getElementById("nav03").blur(); document.getElementById("nav03").style.border="1px inset #666666"; document.getElementById("nav03").style.background="dodgerblue"; document.getElementById("nav01").style.border="1px inset transparent"; document.getElementById("nav01").style.background="#666666"; document.getElementById("nav02").style.border="1px inset transparent"; document.getElementById("nav02").style.background="#666666"; }//--></script><style type="text/css"><!--body { background-color:#000000; font:10px verdana, arial; color:#ffffff; }div.container { width:50%; margin:0 auto; border:1px solid #666666; }div.navbar { height:20px; margin:0; background-color:#666666; border:1px solid #666666; }div.text { height:75px; padding:10px; border:1px solid #666666; overflow:auto; }ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; }li { display:inline }a.navbar:link, a.navbar:visited { float:left; font:12px verdana, arial; text-decoration:none; color:black; background-color:#666666; padding:2px 9px 2px 8px; border:1px inset transparent; }a.navbar:hover { float:left; font:12px verdana, arial; text-decoration:none; color:white; background-color:#666666; padding:2px 9px 2px 8px; border:1px outset #666666; }a.navbar:active { float:left; font:12px verdana, arial; text-decoration:none; color:black; background-color:#666666; padding:2px 9px 2px 8px; border:1px inset transparent; }--></style><title>font-sizer</title></head><body><div class="container"><div class="navbar"><ul id="navbar"><li><a href="#" class="navbar" id="nav01" onclick="resetFontSize()">Reset font</a></li><li><a href="#" class="navbar" id="nav02" onclick="setFontSmaller()">Smaller font</a></li><li><a href="#" class="navbar" id="nav03" onclick="setFontLarger()">Larger Font</a></li></ul></div><div class="text"><p id="text">Words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words.</p></div></div></body></html>