Question

我有一个网页，其中包含一些设置，允许用户更改网页的某些样式。我已成功获得它，以便我可以更改ID和类的样式，但是想知道是否有一种快速/简单的方法将其重置为css样式表最初的内容（很像SVG中的baseVal和animVal）

我的JavaScript如下：

    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>

如果没有，那么我确信为每个原始类创建一个数组会很容易，只需使用上面的函数将其恢复到原来的状态。

我不想使用jQuery，因为我之前从未使用过jQuery，而是希望避免使用外部库。

撤消或撤消对CSS样式表的更改

0 个答案: