adding and removing styles - clunky

by J. Jones

HTML

<div id="div1" class='plain'>This is some text.</div>
<div id="div2" class='plain'>This is some text.</div>
<br>
<button>Add classes to first div element</button>

CSS

.important {
    background-color:#000000;
    font-weight:bold;
    font-size:xx-large;
}
.blue {
    background-color:#FF0033 !important;
    color:blue;
}
.plain {
    background-color:#990099;
}

JavaScript

function dump(object) {
    var output = object + "<br>";
    var keys = [];
    for (var key in object) {
        if (key.length > 0) keys.push(key);
    }
    keys.sort();
    for (var i = 0; i < keys.length; i++) {
        var property = keys[i];
        try {
            var val = object[property];
            var vals = '' + val;
            if (val !== null && val !== undefined && vals.length > 0) output += "key:" + property + ': value:' + object[property] + ';<br>';
        } catch (err) { // deprecated members will cause this
            //output += property + ': ' + err.message;
        }
    }
    return output;
}
$(document).ready(function () {
    console.clear();
    console.log("start");

    $("button").click(function () {
        var thing = $('#div1');
        var things = $(thing).filter(".blue");
        var numColored = $(things).length;
        console.log("number blue colored things is:" + $(things).length);
        if (numColored > 0) {
            console.log("passed first test");
            var oldclass = $(thing).data('original_class');
            console.log("restoring style: "); // + oldclass);
            //document.getElementById("div1").style.cssText = oldclass;
            $(thing).removeClass('important blue');
        } else {
            console.log("passed second test");
            var oldstyle = $(thing).css("cssText");
            //console.log("old class is: " + oldstyle);
            $(thing).css({'background-color':'transparent'});
            $(thing).data('original_class', oldstyle);
            $(thing).addClass("important blue");
            var newstyle = $(thing).css("cssText");
            $(thing).data('new_class', newstyle);
            var oldarr = oldstyle.split(';');
            var newarr = newstyle.split(';');
            var diff = newarr.filter(function (x) { // important blue added this difference
                return oldarr.indexOf(x) < 0
            });
            var diff2 = oldarr.filter(function...