JavaScript Style Switcher

by HYEONGJINKIM

HTML

<h1>My Awesome Heading</h1>

<img src="http://i.imgur.com/AX0gATA.jpg" />

<p>Bacon ipsum dolor sit amet chicken hamburger short ribs strip steak tenderloin, bresaola kevin fatback frankfurter. Pancetta t-bone ham hock, pork loin andouille sirloin pork chop kielbasa tongue. Flank shoulder porchetta chicken, short loin ham hock sausage frankfurter. Shank meatloaf porchetta short loin chicken, jowl tail flank frankfurter pig. Tri-tip biltong ribeye t-bone flank beef ribs landjaeger meatloaf tenderloin andouille drumstick kevin venison jerky. Pork chop pastrami bresaola jerky shank pork loin tail capicola venison beef ribs ham hock spare ribs filet mignon ham ribeye. Tail pork belly jerky, kielbasa tenderloin bacon ball tip short loin beef chuck prosciutto.</p>

<label for="styleSwitcher">Choose a style: </label>
<select id="styleSwitcher">
    <option value="normal">Normal</value>
    <option value="high-contrast">High Contrast</value>
    <option value="print">Print</value>
</select>

CSS

/* Normal styles */
h1{
    text-shadow: 2px 2px gray;
}

img{
    float: right;
    width: 250px;
    padding-left: 20px;
}

/* High contrast */
body.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;
}

JavaScript

// Cross browser addEvent function by John Resig
// http://ejohn.org/blog/flexible-javascript-events/
function addEvent(obj, type, fn) {
    if (obj.attachEvent) {
        obj['e' + type + fn] = fn;
        obj[type + fn] = function () {
            obj['e' + type + fn](window.event);
        }
        obj.attachEvent('on' + type, obj[type + fn]);
    } else obj.addEventListener(type, fn, false);
}

function trigger(action, el){
  if (document.createEvent) {
    var event = document.createEvent('HTMLEvents');
    event.initEvent(action, true, false);
    el.dispatchEvent(event);
  } else {
    el.fireEvent('on' + action);
  }    
}

function switchStyles(){
    var selectedOption = this.options[this.selectedIndex],
        className = selectedOption.value;
        
    document.body.className = className;
    localStorage.setItem("bodyClassName", className);    
}

var styleSwitcher = document.getElementById("styleSwitcher");
addEvent(styleSwitcher, "change", switchStyles);

var storedClassName = localStorage.getItem("bodyClassName");
if (storedClassName){
    for(var i=0; i < styleSwitcher.options.length; i++){
        if (styleSwitcher.options[i].value === storedClassName){
            styleSwitcher.selectedIndex = i;
            trigger("change", styleSwitcher);
        }
    }
}