JavaScript is commonly used to make small changes in a web page in response to some action by the reader. I recently came across a situation where I wanted to completely change the document's style depending on certain factors. As is my habit, I decided to write a small program to play with this. For the sake of experimentation, I decided to work with just a few very simple and visible style changes. If this were my final goal, it would probably be easiest to just make the changes directly – for instance, setting the background color by setting document.body.style.background to my desired choice. However, I wanted to use CSS, because I find that simpler for large scale changes (and also, because it's easier to just cut and paste CSS when you see some you like!)

DESIGN:
I use in-line style sheets with the <style> tag fairly often, so that's what I used for my experiment. To support this I put an empty set of style tags in my page header. Since this is an experiment and I want reusable code for bigger projects, I decided to use a function to make the changes. My function, change_style, takes the desired style in CSS syntax as an argument which it sets as the content between the opening and closing style tags by assigning it to document.getElementsByTagName('style')[0].innerHTML.

For experimental purposes, I decided to use buttons to trigger the changes. I created four buttons which call my function with different arguments, including one that sets the style back to empty.

CODE:
My final code looked like this:



DISCUSSION:
This works well, but it quickly gets unwieldy as you have more style information. I think using external style sheets would be a better solution in this case. Using the style tag seems more useful for adding or changing one or two items in the style sheet. Taking advantage of the cascading feature of CSS , this can be done by simply changing the function to use the concatenation operator (.=) to append new information to the contents between the style tags.
This results in the following function:

In both cases, we are assuming we have one and only one set of style tags in the document. That seems like a reasonable assumption, but what if you had different style sheets for printing versus screen use? How do you know you are changing the correct one?

REFERENCE:
Style Sheets in HTML documents - from the W3C