Changing Styles Dynamically

[Milamber]

Let's say i have three radio buttons:

radio1
radio2
radio3


I also have two sections:

info1
info2

and each section has a table with stuff in it.


Now, here's what I want::

When someone clicks on radio1, i want both info sections bg color to be set to white.

When they click on radio2, I want info1 section bg color to become red, and info2 section to become white.

Finally when they click on radio3, i want info2 bg color to become red, and info1 section bg color to be white.


Make sense?


How can I acomplish this, using stylesheets?



Gracias!

[Adam P.]

Try searching through www.javascriptsource.com

I remember seeing something like that there.

I'll look for it in the meantime

[Milamber]

does no one know how to do this?

[dhtmlgod]

milamber, i can do it, but im jus going to bed right now (im dying of the fli) so ill do it 2morrow morning

[SlaveToTheMan]

check this page out. . .

http://www.markup.co.nz/dom/style_the_dom.htm#nodeObj

[[MOS]]

With IE4,IE5,IE6,NS6 it's very easy. To change the style properties of a DIV with Javascript, you have to find the right layer, then change the property. There are different ways to follow the DOM to the desired container, so I just check what browser I am working with, and then use two general functions to do this.

<script language="Javascript" type="text/javascript">
<!--
var ns4, ie4, dom;
ns4 = (document.layers)?true:false;
ie4 = (document.all && !document.getElementById)?true:false;
dom = (document.getElementById)?true:false;

function changeStyle(divname, prop, value)
{
var obj;
if (ns4)
obj = document.layers[divname];
if (ie4)
obj = document.all[divname];
if (dom)
obj = document.getElementById(divname);
if (ns4)
obj.prop = value
else
obj.style.prop = value;

}
//-->
</script>

'prop' and 'value' may differ from NS4 and IE. You should check http://www.webreference.com/dhtml and http://www.docjavascript.com to learn how to write proper cross-browser DHTML.

Anyway, in your case you can use the funcion like this, supposing your two sections are <DIV id="info1"> and <DIV id="info2">:

...onwhatever = "changeStyle('info1', 'backgroundColor', '#ff0000');"

for example.

Hope it helps, I just wrote the function right now, have not tested it.

(God, I will end up explaining myself better in English than in Spanish )