Jump to content

Using HTML DOM

A-Damage

By A-Damage
in JavaScript

 Share

Recommended Posts

A-Damage Newbie

A-Damage

Posted
Posted

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>

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted

You can use css classes to accomplish this. Set up all your default styles in the stylesheet as you already are. Then set up all the styles for when an object is clicked in its own class which you could call "active" or something.For example:

<style type="text/css">a { color: red; }a.active { color: green; }</style>

Then, when you want some element to be active you do this:

document.getElementById("myelement").className = "active";

And when you want some element to not be active (i.e. go back to the defaults) you can do this:

document.getElementById("myelement").className = "";

Or, if you already have a class (e.g. "navbar") and you want an active class (e.g. "navbar_active"), you can do it like this:

document.getElementById("mylink1").className = "navbar_active";document.getElementById("mylink2").className = "navbar";

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...