1

我有一个带有一些设置的网页，这些设置将允许用户更改网页的某些样式。我已经成功获得它，以便我可以更改 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，因为我以前从未使用过它，并且更愿意避免使用外部库。

4

0 回答 0