Question

我想为单页面应用程序添加主题支持。要求是主题更改必须通过javascript（无服务器调用）在本地完成，以便在脱机模式下使用。我使用angularjs，所以html将在路由器中更改。

我唯一的问题是如何治疗css。是否有任何js库来帮助我加载css文件？这有什么问题吗？

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

Answer 1

可以在JavaScript中添加和删除

style个元素。只需创建元素并将其添加到页面以在其中应用规则，并删除元素以删除其规则。您可以使用引用外部样式表的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会更容易，因为您不必处理样式文本所在位置的浏览器差异。

Answer 2

如果您的主题只改变颜色，我将使用不同的css类来解决此问题。由于CSS可以被覆盖，因此您只需将theameame作为类附加到父元素，并为其创建相应的规则。我建议将所有与主题相关的css规则放在一个不同的文件中，这样更容易维护。

喜欢

.themename.cssclassname{
   color: red;
}

将胜过

.cssclassname{
   color: green;
}

您可以使用less轻松创建嵌套规则

通过这样做，您将获得3个好处。

所有浏览器都接受这一点，包括IE7。（我认为IE7在动态插入样式标记时会出现一些问题）
所有CSS文件都将被缓存。
易于维护。（我真的不喜欢将CSS和JS混合在一起太多。）

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

2 个答案: