我知道您可以将样式表放在页面的头部，但我喜欢将它们放在单独的文件中。现在我正在使用单页应用程序。
在 SPA 中，内容是动态的，对吧？所以我不想用链接标签导入头部的所有样式表。我可以在需要时以某种方式导入样式表吗？
我的意思是，我可以在正文中有一个链接，这样每当我的 SPA 加载一些动态内容时，样式表也会被加载？这样即使没有加载动态内容，我也不必加载所有样式表..
我再次强调：只要加载内容，就会加载样式。
我知道我可以借助这样的内联样式来做到这一点：
~PSEUDO CODE
<tagname style="somestyle"></tagname>
但是我也可以导入一些动态文件吗？我也可以在正文中添加link 标签吗？就算有效，是标准的吗？
【问题讨论】：
您应该研究异步加载资产，例如著名的 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> 标记。
【讨论】：
您可以使用 java 脚本在头部区域添加/删除/编辑链接标签以添加/删除样式表文件。
代码示例：
在头部添加样式表：
var newstyle = document.createElement("link"); // Create a new link Tag
// Set some attributes:
newstyle.setAttribute("rel", "stylesheet");
newstyle.setAttribute("type", "text/css");
newstyle.setAttribute("href", "filename.css"); // Your .css File
document.getElementsByTagName("head")[0].appendChild(newstyle);
要删除或编辑样式表，您可以为每个样式表指定一个 id 属性并通过以下方式访问它：
document.getElementById('styleid')
或者您可以遍历头部区域中的所有链接标签并找到正确的标签，但我建议使用 ID 的解决方案；）
现在您可以更改 href 属性：
document.getElementById('styleid').setAttribute("href", "newfilename.css");
或者你可以删除完整的标签：
var styletorem = document.getElementById('styleid');
styletorem.parentNode.removeChild(styletorem)
【讨论】：
我只是尝试为我的网页添加动态样式。我用了一个按钮。单击它后，CSS 将使用 Javascript 中的方法导入。
在我的 html 中，我有：
<button type="button" onclick="changeStyle()"> CLICK TO SEE THE MAGIC!! </button>
然后在 Javascript 中，我有一个名为 changeStyle() 的方法：
function changeStyle()
{
var styles = document.createElement('link');
styles.type="text/css";
styles.rel="stylesheet";
styles.href="./css/style.css";
document.head.appendChild(styles);
}
它完美地工作。
【讨论】：