gpt4 book ai didi

html - 动态加载样式表

转载 作者:太空狗 更新时间:2023-10-29 14:47:25 25 4
gpt4 key购买 nike

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

在 SPA 中,内容是动态的,对吧?所以我不想用链接标签导入标题部分的所有样式表。我可以在需要时以某种方式导入样式表吗?

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

我再次强调:只要加载内容,就会加载样式。

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

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

但是我也可以导入一些动态文件吗?我也可以在正文中包含 link 标签吗?即使有效,它是标准的吗?

最佳答案

您应该研究异步加载 Assets ,例如著名的 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 行为变量创建了一个新的作用域,这样局部变量就不会与全局作用域的变量发生冲突或被覆盖。不一定只是最佳实践。此解决方案还假设您有一个 <head>在您的 html 中标记。

关于html - 动态加载样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18510347/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com