html – 动态加载样式表

我知道你可以在页面的头部有样式表,但我喜欢将它们放在一个单独的文件中.现在我正在使用单页应用程序.

在SPA中,内容是动态的,对吧？所以我不想用head标签导入head部分的所有样式表.我可以以某种方式导入样式表 – 当我需要它们时？

我的意思是,我可以在正文中有一个链接,这样每当我的SPA加载一些动态内容时,样式表也会被加载吗？这样即使没有加载动态内容,我也不必加载所有样式表.

我再次强调：每当内容加载时,样式加载.

我知道我可以借助于这样的内联样式来做到这一点：

~PSEUDO CODE 
<tagname style="somestyle"></tagname>

但我可以进行一些动态文件导入吗？我也可以在身体中使用链接标签吗？即使它有效,它是标准的吗？

解决方法

您应该考虑异步加载资产,例如着名的谷歌分析代码.您可以使用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中标记.