Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 613

Sep 3rd, 2010

Dynamically Change Style

Expand Post »

Hey Guys,

I'm really stuck on how I can have the visitor change the style of the content on my webpage. I've looked into stylesheet switcher, but that changes a whole stylesheet, when really all I want users to be able to change is their preferred background color, alignment, font family, font color and font size.

So for example, how would I let the user be able to select a certain style type for these specific classes:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
	<table class="background">
		<tr class="justify">
			<td class="fontfamily">
				<p class="fontsize">
					<strong class="fontcolor">Hello World!
					</strong>
				</p>
			</td>
		</tr>
	</table>
	<table class="background">
		<tr class="justify">
			<td class="fontfamily">
				<p class="fontsize">
					<strong class="fontcolor">Hello World!
					</strong>
				</p>
			</td>
		</tr>
	</table>

So, I could have a script that would left the user control the class=Background, where they can select a background color from a selection.

I hope that makes sense! Can anyone help me out?
I really appreciate all your help!

Similar Threads

Dynamically changing the frameset size in JSP
Changing style of filter buttons in CSS? in HTML and CSS
Can't change CSS style for "onClick" text link in JavaScript / DHTML / AJAX
apply style to excel in VB.NET
dynamically change fields in JavaScript / DHTML / AJAX

brown23

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

22 posts
since Sep 2010

Permalink

Sep 3rd, 2010

Re: Dynamically Change Style

Found out how to do it!

If I'm honest then I didn't expect a reply because I couldn't really explain what I was trying to achieve! But, if anyone in future has the same problem, then here is the solution.

If you want to associate a different class when a user clicks something then here's how you do it. In this example, we're changing the background colour to black when the user clicks on a radio button:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<html>
<head>
<title>Test</title>
<style type="text/css">
.blackbackground {background:#000000;}
</style>
<script type="text/javascript">
function change(id, newClass) {
identity=document.getElementById(id);
identity.className=newClass;
}
</script>
<body>
<table id="background">
 <tr>
  <td><br/><input type="radio" name="styling" onclick="change('background', 'backgroundblack');">Black Background Background</td>
  </td>
 </tr>
</table>
</body>
</html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.blackbackground {background:#000000;}
</style>
<script type="text/javascript">
function change(id, newClass) {
identity=document.getElementById(id);
identity.className=newClass;
}
</script>
<body>
<table id="background">
 <tr>
  <td><br/><input type="radio" name="styling" onclick="change('background', 'backgroundblack');">Black Background Background</td>
  </td>
 </tr>
</table>
</body>
</html>

I'm sure you'll be able to work out how it works by looking at the code - you'll probably also be able to see how you can also manipulate the function to gain a better advantage!

If anyone has any problems please do reply and I'll explain a little bit more!

Thanks,
Brownie!

Last edited by brown23; Sep 3rd, 2010 at 8:03 pm.

brown23

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

22 posts
since Sep 2010

Permalink

Sep 4th, 2010

Re: Dynamically Change Style

This works perfect for me:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<html>
<head>
<title>Test</title>
<style type="text/css">
table.background {background:blue;}
p {
color: green;
}
</style>
<script type="text/javascript">
function change(id) {
document.getElementById("background").style.backgroundColor = "white";
document.getElementById("fonter").style.color = "black";
document.getElementById("fontes").style.color = "black";
}
function changeb(id) {
document.getElementById("background").style.backgroundColor = "black";
document.getElementById("fontes").style.color = "white";
document.getElementById("fonter").style.color = "white";
}
</script>
<body>
<table id="background" class="background">
 <tr>
  <td><br/><input type="radio" name="styling" onclick="change();"><p id="fonter">White Background</p></td>
  <td><br/><input type="radio" name="styling" onclick="changeb();"><p id="fontes">Black Background</p></td>
</td>
 </tr>
</table>
</body>
</html>
<html>
<head>
<title>Test</title>
<style type="text/css">
table.background {background:blue;}
p {
color: green;
}
</style>
<script type="text/javascript">
function change(id) {
document.getElementById("background").style.backgroundColor = "white";
document.getElementById("fonter").style.color = "black";
document.getElementById("fontes").style.color = "black";
}
function changeb(id) {
document.getElementById("background").style.backgroundColor = "black";
document.getElementById("fontes").style.color = "white";
document.getElementById("fonter").style.color = "white";
}
</script>
<body>
<table id="background" class="background">
 <tr>
  <td><br/><input type="radio" name="styling" onclick="change();"><p id="fonter">White Background</p></td>
  <td><br/><input type="radio" name="styling" onclick="changeb();"><p id="fontes">Black Background</p></td>
</td>
 </tr>
</table>
</body>
</html>

george61

Reputation Points: 10

Solved Threads: 6

Junior Poster in Training

Offline

59 posts
since Jul 2010

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: passing information between pages

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: How do I "Javascript" on a Mac

DaniWeb Message

Cancel Changes

User Name
Password