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;

HTML Code:

<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

HTML Code:

<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:

Code:

<!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:

Code:

<!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>

Thread: Javascript onclick event to change an elements inline style?

Thread Tools

Search Thread

Javascript onclick event to change an elements inline style?

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions