Creating a Simple Style Switcher

One way to enhance your site’s user experience is to allow your visitors to personalize certain aspects of it. This could be anything from increasing font size, to selecting an appropriate language or locale. As a developer, the challenge in implementing this is twofold. You have to enable the user to make the personalizations in the first place, as well as remember them the next time they visit. This tutorial will teach you how to create a style switcher and use local storage to remember your user’s preferences.

The Basics

The first thing we’ll need is a basic HTML page with a bit of content and styling. I’ll also add a select element which will enable the visitor to change between styles. An example of what this page might look like is shown below.

Reacting to Events

Since a dropdown menu is used to switch between styles, we need to attach an event listener to the select element that reacts appropriately each time the user selects a new style. According to the W3C DOM Level 2 Event Model, the standard way to register event handlers is as follows:

element.addEventListener(, , );

The meaning of each argument is:

  • event-name – A string representing the name or type of event that you would like to listen for.
  • callback – A function that is invoked whenever the event fires.
  • use-capture – A Boolean declaring whether the callback should be fired in the capture phase. This is when the event flows from the document’s root to the target.

Unfortunately, IE8 and its predecessors don’t adhere to this model. Instead they provide an alternative attachEvent() method for the same purpose. Whether or not you choose to support these older versions of IE is up to you, and depends on your visitor metrics. You should weigh the cost of supporting older browsers against the benefits this will bring. In this particular case, it’s a matter of using a simple polyfill, so supporting IE8 is not a big deal. The following code sample shows how the select element’s change event is handled across all browsers.

Within the switchStyles() function, it’s important to note that this refers to the element that triggered the event (in this case the select element). Consequently, this.options will give us access to the select element’s option elements, and this.options[this.selectedIndex] will give us access to the currently selected one. From there it is simple to access the option‘s value attribute.

Also notice that the code uses a console.log(), instead of an alert(). This is done because an alert() blocks the UI, and needs to be dismissed before JavaScript execution can resume. In this example that’s not too bad, but in more complex cases (such as examining the elements of a sizable array), this approach can be very ugly. If you are unsure about how to open your browser’s console, you can find out here. If you would like to learn a little more about using the console for JavaScript debugging, you can do so here.

Changing Styles

Now it’s time to add some simple styles to our page which the user will be able to choose between. Add the following CSS code to your project:

/* High contrast */
background-color: DarkBlue;
color: yellow

body.high-contrast h1{
text-shadow: none;

/* Print */
body.print h1{
text-shadow: none;

body.print img{
display: none;

When a user selects a different style from the drop-down, we’re going to apply the appropriate class directly to the body, removing all other classes:

function switchStyles() {
var selectedOption = this.options[this.selectedIndex],
className = selectedOption.value;

document.body.className = className;

Continue reading %Creating a Simple Style Switcher%


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s