Question

我正在使用RequireJS在SPA中加载样式表，然后将样式表动态应用到用户看到的任何视图。我几乎是一个web newb，我不知道根据视图动态添加和删除样式表是否有意义，或者我应该在应用程序启动时将所有样式表添加到文档中？

我认为在某些情况下，样式表可能会重叠，即将不同的参数应用于相同的.classes等等。所以在某些情况下，从文档中删除样式表并添加另一个样式表是有意义的。

由于这是一个SPA，它应该在整个应用程序生命周期中都是相同的文档对象，因此我不能依赖页面重新加载来删除样式表 - 我将不得不显式地添加和删除它们。

其次，如果我已经加载了一个带有Require-CSS *插件的CSS文件，如下所示：

define(['css!my_stylesheet_path'],function(sss){

 //how do I apply the stylesheet 'sss' to the document?  <<<<

});

我希望这个问题有道理。

* https://github.com/guybedford/require-css

Answer 1

在主文档中包含样式表。

如果你担心课程可能会重复，那么这些风格可能会被克服。根除这一点的方法之一是，为每个模板提供一个唯一的父ID，并附加样式，保持此ID后跟类，然后您可以确保这些样式永远不会被过度缠绕，因为id是唯一的。

Answer 2

是的，考虑到您指定的系统环境和要求，这样做是有意义的，您应该考虑异步加载资产，例如着名的google-analytic s代码。您可以使用Javascript加载外部样式表。

<强> JavaScript的：

(function(){
  var styles = document.createElement('link');
  styles.rel = 'stylesheet';
  styles.type = 'text/css';
  styles.media = 'screen';
  styles.href = 'path/to/css/file';
  document.getElementsByTagName('head')[0].appendChild(styles);
})();

第1行和第7行为变量创建一个新范围，以便局部变量不会与全局范围的变量发生冲突或覆盖。仅仅是最佳实践并非必要。此解决方案还假设您的<head>中包含html标记。

要删除或编辑样式表，您可以为每个样式表指定一个id属性，并使用以下命令对其进行访问：

document.getElementById('styleid')

然后你可以改变href属性：

document.getElementById('styleid').setAttribute("href", "newfilename.css");

或者您可以删除完整标记：

var styletorem = document.getElementById('styleid');

styletorem.parentNode.removeChild(styletorem)

检查链接以进一步阅读： Add Rules To Stylesheet

将链接的样式表动态应用于文档 - 添加全部，还是动态添加/删除？

2 个答案: