Stylesheet...

[Studly Cannon]

Is there a way to change the style sheet of the page upon a click of a link? Like say, I was testing something and had a black page /w white text, and with a click, change it to a white page with black text?

I know it can be done with just the plain font alone, but what about the background?

[jscheuer1]

It is much easier to change style properties or even, element attributes. Some browsers allow for choosing from a menu of external styles but, if you want your page's changes to be accessible to the vast majority of javascript enabled browsers. You are better off accessing properties or attributes. Here is a simple scripted form for the body of your page:

<form name="thiscolor">
<p><input type="text"></p>
<input type="button" 
value="Type a background color and click to change to that color" 
onClick="document.getElementsByTagName? document.getElementsByTagName('body')[0].style.background=unescape(document.forms['thiscolor'][0].value) : document.bgColor=unescape(document.forms['thiscolor'][0].value);">
</form>

[AlistairH]

You might want to look at this as I recently asked much the same question:

http://www.dynamicdrive.com/forums/s...ead.php?t=3459

[Studly Cannon]

Jscheuer1, is there anyway to do this so that there are preset colors?

AlistairH, that's exactly what I'm looking for, but I don't use PHP on my pages...



Wait, I saw a place that has the option to change font colors... Here

[jscheuer1]

Sure:

<input type="button" 
value="Red" 
onClick="document.getElementsByTagName? document.getElementsByTagName('body')[0].style.background='red' : document.bgColor='red';">

[Studly Cannon]

It works, whoo.

Finally my last question, hopefully. How can I get that to change font color as well?

I don't know much, so I'm not sure this is right:

<a href="javascript:void(0)" onClick="document.getElementsByTagName? document.getElementsByTagName('body')[0].style.background='black' : document.bgColor='red';onClick="document.getElementsByTagName? document.getElementsByTagName('body')[0].style.color='white' : document.Color='red'">...</a>

[mwinter]

AlistairH, that's exactly what I'm looking for, but I don't use PHP on my pages...

Any server-side language is suitable, if you have none available at all, then you can use the client-side code that I posted. I just suggested that it's best to use both in tandem as it provides a guaranteed solution that will work for everyone. If you do use the suggestion in the thread Alistair cited, use the first version.

That said, if you're changing colours interactively, rather than changing the style sheet itself, then it isn't a good solution.


As for changing body text colours:

function setColours(foreground, background) {
  var body = document.body,
      style;

  if(body && (style = body.style)) {
    style.color = foreground;
    style.backgroundColor = background;
  }
}

The expected arguments are strings that specify a colour in some CSS-compliant way.

<a href="javascript:void(0)"

The javascript: pseudo-scheme should rarely ever be used as it tends to cause problems, such as stopping animation, and being nonsense for script-disabled user agents. If you really cannot provide a link to somewhere useful, then use a pattern like:

<a href="#" onclick="/* ... */; return false;">...</a>

With regard to the onclick attribute, you can only have one per element (that's true of any attribute) so you must combine the two by ending the first statement with a semicolon. The HTML snippet above shows this to a degree.

Mike

[AlistairH]

AlistairH, that's exactly what I'm looking for, but I don't use PHP on my pages...

The solution I'm using only uses client-side javascript to load a corresponding style sheet to change colours. I have an example here:

http://alistairhamilton.homecall.co....ape/index.html

This references 7 separate style sheets: general.css is a persistent one and contains all the style settings except those related to colour. The others, cityscapeblue.css, cityscapegreen.css, cityscapered.css, cityscapeorange.css, cityscapeteal.css and cityscapepurple.css (all contained in the .../cityscapes/css/ folder) contain, as you've probably guessed, the colour settings.

I've just started learning to use css positioning to produce my layout instead of tables so though the above pages work in IE, you won't be surprised to learn that FireFox isn't too happy with it ...

[Studly Cannon]

So all I need is the style sheets and it'll work? How do you make the links change them?

[AlistairH]

The links in the menu call a javascript function held in the jslibrary.js file which is referenced at the beginning of the html file. The code is that supplied by Mike in the thread I refered to earlier:

function activateStyleSheet(title){
	var c, i, t;
	if(!(c = document.styleSheets)) {return;}
	i = c.length;
	while(i--){
		if((t = c[i].title)){
			c[i].disabled = (title != t);
		}
	}
}

Have a look at the html code in the webpage to see how the function is called and who the stylesheets are refered to.