Member Avatar for brown23

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:

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

  • 2 Contributors
  • 2 Replies
  • 110 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by george61

Recommended Answers

All 2 Replies

Member Avatar for brown23

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:

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

Edited by brown23 because: n/a
Member Avatar for george61

This works perfect for me:

<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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.