1

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

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

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

4

2 回答 2

0

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

喜欢

.themename.cssclassname{
   color: red;
}

会胜过

.cssclassname{
   color: green;
}

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

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

  1. 所有浏览器都接受这一点，包括 IE7。（我认为IE7在动态插入样式标签时会出现一些问题）

  2. 所有 CSS 文件都将被缓存。

  3. 易于维护。（我真的不喜欢把 CSS 和 JS 混在一起太多。）

于 2012-11-05T15:54:45.087 回答
0

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);
    }
  }

})();

实时复制| 资源

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

于 2012-11-05T12:47:27.833 回答