PDA

View Full Version : Javascript onclick event to change an elements inline style?



gwmbox
01-03-2011, 02:10 AM
Can someone help me with the javascript code to have an onclick and an onchange event to change an inline style from A to B is please, this will be to change up to ten HTML elements at the same time. I know I could have a different style sheet for each case and have it load that style sheet on each selection, but I think in this case I need it to just change the inline style

So if I have;


<div style="border:1px solid black;"></div>

and then an image that can be clicked on or a drop down select that can be used to select an item from so when it is selected it changes the inline style


<div style="border:2px dashed red;"></div>

I assume I need to give the element an ID and reference that ID, but what if the selection affects 10 different HTML elements, i.e. not just one.

Thanks

GW

jscheuer1
01-03-2011, 06:08 AM
I think you may want more than that. But here's what it looks like you're asking for:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('.changer').bind('click change', function(e){
if(e.type === 'change' && e.target.value !== 'dred' || e.type === 'click' && /select|option/i.test(e.target.tagName)){return;}
$('.changee').css({border: '2px dashed red'});
if(e.type === 'click'){e.preventDefault();}
});
});
</script>
</head>
<body>
<div class="changee" style="border:1px solid black;">Hi</div>
<div class="changee" style="border:1px solid black;">There</div>
<div class="changee" style="border:1px solid black;">Folks</div>
<img src="some.gif" class="changer" alt="original image" title=""><br>
<select class="changer" name="whatever">
<option value="">Select</option>
<option value="dred">Change</option>
</select>
</body>
</html>

I think you may want more like so:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('.changer').bind('click change', function(e){
var o = e.target.options, s = e.target.selectedIndex;
if(e.type === 'change' && o[s].text !== 'Change' || e.type === 'click' && /select|option/i.test(e.target.tagName)){return;}
$('.changee').toggleClass('dred');
if(e.type === 'click'){e.preventDefault();}
});
});
</script>
<style type="text/css">
.changee {
border: 1px solid black;
}
.changee.dred {
border: 2px dashed red;
}
</style>
</head>
<body>
<div class="changee">Hi</div>
<div class="changee">There</div>
<div class="changee">Folks</div>
<img src="some.gif" class="changer" alt="original image" title=""><br>
<select class="changer" name="whatever">
<option value="">Select</option>
<option value="">Change</option>
</select>
</body>
</html>