Categories
JavaScript PHP

Change the CSS of your site with JavaScript

This is a useful trick.

Change the CSS of the site without loading the entire site. It’s something really easy to do.

Here you can find this small example to do it:

Imagine that you have 2 css (can be only 1), 1 with all the styles and another with the colors:


Then we do more CSS with different colors:




Well, then first we need to put an ID to the style we want to change:


Later we need a function that can change this:

To use it (can be at any html tag or event):

green |
blue |
orange |
purple

Like this we have the nice feeling of automatic change of color.

Also if like me, you are using PHP, maybe would be nice to load the latest CSS that the user selected:


If you want to try this script there’s a live demo (top right) that I did for the demo of Open Classifieds.