I have a web page in which I have more than one color scheme available, based on the class given to a parent element, which is then inherited by its children elements. So, for example:

body class="plain"
body class="cold"
body class="heat"

Other elements within the body pick up this class to choose which colors they get. Now, this could just as easily be a div or table as the parent, but here, it's the body to control the whole thing. I'll omit the CSS; that's not what I'm about to ask regarding.

I would like to have a JavaScript call that changes the CSS class name attribute of the body element (or whatever other element) on the fly and re-styles the page. This seems easier than maintaining two or more separate stylesheets, when all else is staying the same.

My JavaScript is weak. I borrowed from an online example, then broke off functions within that. What I'm trying to do is set up an array with the class names, then use that with a script, which is called from an "a" link element.

However, it isn't working, so I've commented that out and have three separate pages for now, to show what they look like.

Example Web1:
http://www.shinyfiction.com/themes/hc01 … index.html



[/code]

cssAltClassList.js


cssClassSwitcher.js

I think this is what your looking for.
http://www.electrictoolbox.com/html-css … -id-class/

Hi Eric. That link and its relatives were handy for a couple of other techniques and a refresher.

Thanks, but it's the JavaScript that's not working. I commented out the relevant two script tags and calls from the UL list-item links, because this wasn't working. I need help to understand what I did wrong there and how to fix it. I'm fine with using an id or class in CSS. That part's easy for me. I know the styles work right. What I'm trying to do is have the JavaScript swap out the CSS class name upon clicking a link.

Suppose we start with body class="cold". The visitor clicks the Heat link or the Plain link to change to body class="heat" or body class="plain". The JavaScript is supposed to do the following:

1. Given: an Array of String ( "plain", "cold", "heat" ); of possible CSS class names.
2. Take the body element, which has the id, idBody.
3. Delete the existing class name, "cold", but leave untouched other class names, if any, on that element. (Otherwise, we could do a simple reassignment.)
4. Insert the newly desired class name, "heat" (or "plain"), into the idBody element's class attribute.
5. Redraw the page to show the new styles.
6. Done.

Yes, this could be done with separate stylesheets, but really all that's changing are the color scheme and images on certain elements. The majority stay the same. Maintaining two or three (or potentially more) separate stylesheets seems like inviting a nightmare of chaos.

I thought in my posts above, I'd made clear what I was having trouble and needed help with, but somehow, I must've confused people. Sorry for the confusion, and I'd still appreciate help.

I feel sure it's not passing something back to the element, or not sending a message back to redraw the page because the CSS class name has changed. It ought to be simple, but it has me stumped.

Do not shoot the messenger, accept him and if you do not understand his message, ask again. Politely.

Huh? I wasn't trying to be impolite or rude. I was trying to restate what my problem (and lack of understanding) was, because my question had not been understood. Sincerely, I'd like to know how my post was inconsiderate or otherwise unkind. I thought I was being both nice and courteous. I do try to be, always.

I believe either I posted on the wrong thread of this was moved... lol This was not meant for your post.

Now to find where it was supposed to go! lol

Oh! OK, thanks, I was seriously scratching my head, trying to figure out how I'd aggravated anyone.

Uh, nice to know I hadn't. :whew:

LOL...and I can understand about posting one place and meaning to post another, and then not being sure where the heck you were. Uh...I resemble that. :-/

Thanks, Sirage. That's a relief!