Undo or reverse a change to CSS style sheet

322 views Asked by At

I have a webpage with some settings which will allow the user to change certain styles of the webpage. I have successfully got it so that I can change the styles of both IDs and classes, but was wondering if there was a quick/easy way to reset it back to what the css stylesheet originally had (much like the baseVal and animVal in SVG).

My JavaScript is as follows:

    function cssrules() {
      var rules = {};
      var ds = document.styleSheets,
        dsl = ds.length;
      for (var i = 0; i < dsl; ++i) {
        var dsi = ds[i].cssRules,
          dsil = dsi.length;
        for (var j = 0; j < dsil; ++j) rules[dsi[j].selectorText] = dsi[j];
      }
      return rules;
    };

    function css_getclass(name) {
      var rules = cssrules();
      if (!rules.hasOwnProperty(name)) throw 'todo:deal_with_notfound_case';
      return rules[name];
    };

    function modify_css(data) {
      var i, mod;
      for (i = 0; i < data.length; i += 1) {
        mod = data[i].change;
        css_getclass(mod).style[data[i].changing] = data[i].value;
      }
    }

     //some example data
    var mod = [{
      change: ".large_glow",
      changing: "color",
      value: "red"
    }, {
      change: ".large_glow",
      changing: "text-shadow",
      value: "0px 0px 20px #900"
    }];
    document.getElementById("click").addEventListener("click", function() {
      modify_css(mod);
    });
.large_glow {
  text-shadow: 0px 0px 10px #555;
}
<span class="large_glow">This is some text</span><br>
<button id="click">Change the class</button><br>
<button id="not_click">Revert the class (if possible)</button>

If not then I'm sure it will be easy to create an array for each original class, and simply use the above function to put it back to how it was originally.

I would like to not have to use jQuery, as I have never used it before and would prefer to avoid external libraries.

0

There are 0 answers