How to manipulate the CSS at runtime

I have 3 radio buttons 1) left, 2) r开发者_运维百科ight 3) none

so when I hover over the radio button I am showing the following 3 divs, each with different CSS.

#popupdiv img {
    float: right;
    clear: right;
    margin: 15px
}

#popupdiv img {
    float: left;
    clear: left;
    margin: 15px
}

#popupdiv img {
    float: random; //i want the image to be display randomly in the div
    clear: random;
    margin: 15px
}

<div id='popupdiv'>
    <img src='http://www.hostname.com/images/a.jpg' width='100' height='100' border='0' />
    <img src='http://www.hostname.com/features/b.jpg' width='100' height='100' border='0'/>
    <p>same text for all three divs.....
</div>

What I want to do is to have one div and change the css based on which radio button the user hovers over. How do I do this?

What you would do is have a different class for each of the styles. IE:

#popupdiv.left {...}
#popupdiv.right {...}
#popupdiv.random {...}

And then when you hover over the radio button just change the class() attribute on your div to match whichever one you want

Sample HTML:

<form id="formid">
<input type="radio" value="left" name="pos_button" id="left_button"> 
<input type="radio" value="right" name="pos_button" id="right_button">
<input type="radio" value="random" name="pos_button" id="random_button">
</form>

Sample Javascript

$('#formid radio').mouseover(function(e){
   document.getElementById('popupdiv').className = $(this).val();
});

The reason I am using the "className" attribute of the DOM node is because by default jQuery provides removeClass and addClass methods. However, we do not know what radio button was previously hovered on and really, there's no point in keeping track of it unless you need to.

For the tag you use in this post (jquery) I suppose you are using that library, with jquery it is very easy, I think you can do that with something like this:

$('#radio1').mouseover(function(){
    $(this).removeClass('classname1 classname2');
    $(this).addClass('classname');
});