我知道你可以在页面的头部有样式表,但我喜欢将它们放在一个单独的文件中.现在我正在使用单页应用程序.
在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中标记.