html – 动态加载样式表

概述我知道你可以在页面的头部有样式表,但我喜欢将它们放在一个单独的文件中.现在我正在使用单页应用程序. 在SPA中,内容是动态的,对吧？所以我不想用head标签导入head部分的所有样式表.我可以以某种方式导入样式表 – 当我需要它们时？ 我的意思是,我可以在正文中有一个链接,这样每当我的SPA加载一些动态内容时,样式表也会被加载吗？这样即使没有加载动态内容,我也不必加载所有样式表. 我再次强调：每当 我知道你可以在页面的头部有样式表,但我喜欢将它们放在一个单独的文件中.现在我正在使用单页应用程序.

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

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

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

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

~PSEUDO CODE <tagname ></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中标记.

总结

以上是内存溢出为你收集整理的html – 动态加载样式表全部内容，希望文章能够帮你解决html – 动态加载样式表所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。