将链接的样式表动态应用于文档-是全部添加还是动态添加/删除？
[英]Applying linked stylesheets to document dynamically - add all, or add/remove dynamically?
问题描述
我使用RequireJS在SPA中加载样式表，然后将样式表动态应用于用户看到的任何视图。 我几乎是一个网络新手，我不知道根据视图动态添加和删除样式表是否有意义，还是应该在应用程序启动时将所有样式表添加到文档中？
我假设在某些情况下，样式表可能会重叠，即将不同的参数应用于相同的.class等。因此，在某些情况下，一定要从文档中删除样式表并添加另一个样式表。
由于这是SPA，因此在整个应用程序生命周期中它应该是相同的文档对象，因此我不能依靠重新加载页面来删除样式表-我将不得不显式添加和删除它们。
其次，如果我已经用Require-CSS *插件加载了CSS文件，如下所示：
define(['css!my_stylesheet_path'],function(sss){
//how do I apply the stylesheet 'sss' to the document? <<<<
});
我希望这个问题有意义。
2 个解决方案
解决方案1
1 2015-08-14 03:06:23
在主文档中包含样式表。
如果您担心类可能会重复，则样式可能会被覆盖。 消除这种情况的一种方法是，为每个模板赋予唯一的父ID，并在样式后追加保留该ID的样式，然后您可以确保这些样式永远不会被覆盖，因为ID是唯一的。
解决方案2
1 2015-08-14 03:09:13
是的，这样做很有意义，考虑到您的系统环境和指定的要求，您应该考虑异步加载资产，例如著名的google-analytics代码。 您可以使用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行为变量创建了新作用域，以使局部变量不会与全局作用域变量冲突或覆盖。 不一定只是最佳实践。 此解决方案还假定您的html有一个<head>标记。
要删除或编辑样式表，您可以为每个样式表指定一个id属性，并使用以下属性进行访问：
document.getElementById('styleid')
然后您可以更改href属性：
document.getElementById('styleid').setAttribute("href", "newfilename.css");
或者，您可以删除完整的标签：
var styletorem = document.getElementById('styleid');
styletorem.parentNode.removeChild(styletorem)
检查链接以进一步阅读： 将规则添加到样式表
动态地向 DOM 添加和删除样式表
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.