javascript - javascript中单页应用程序的主题支持

Question

我想为我的单页应用程序添加主题支持。要求是主题更改必须通过 javascript 在本地完成(无服务器调用)才能在离线模式下使用。我用的是angularjs，所以html会在router中改变。

我唯一的问题是如何处理 css。有没有js库可以帮我加载css文件？有什么问题吗？

编辑: 我找到了以下库 https://github.com/rgrove/lazyload/应该完成加载 css 文件的工作。该库唯一的缺点是该库的最后一次更新是一年多以前了。一个更积极开发的图书馆将不胜感激。

Answer 1

style 元素可以在 JavaScript 中添加和移除。只需创建元素并将其添加到页面以应用其中的规则，然后删除元素以删除其规则。您可以对引用外部样式表的 link 元素执行相同的操作，但是如果您希望确保在离线模式下工作并且表单可能未被缓存，则 style具有内联规则的元素可能会更好。

这是一个使用 style 元素的例子:

(function() {
  var css = "body { color: green; }";

  document.getElementById("theButton").onclick = toggleStyle;

  function toggleStyle() {
    var style = document.getElementById("styleOne");
    if (style) {
      // Remove it
      style.parentNode.removeChild(style);
    }
    else {
      // Add it
      style = document.createElement('style');
      style.id = "styleOne";
      if (style.styleSheet) {
          style.styleSheet.cssText = css;
      }
      else {
          style.appendChild(document.createTextNode(css));
      }
      document.body.appendChild(style);
    }
  }

})();

Live Copy | Source

使用 link 会更容易，因为您不必处理样式文本所在位置的浏览器差异。