Question

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

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

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

我再次强调：每当加载内容时，样式都会加载。

我知道我可以借助于这样的内联样式来实现：

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

但我可以进行一些动态文件导入吗？身上也可以有link标签吗？即使它有效，它是标准的吗？

Answer 1

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

Answer 2

您可以使用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)

Answer 3

我只是尝试为我的网页提供动态样式。我用了一个按钮。点击它，CSS将使用Javascript中的方法导入。

在我的HTML中，我有：

SELECT  '[5.00]', '[5.00]', '[1.00]', '[35.00]', '[1.00]', '[1.00]', '[1.00]', '[1.00]', '[1.00]', '[1.00]'

然后在Javascript中，我有一个名为changeStyle（）的方法：

<button type="button" onclick="changeStyle()"> CLICK TO SEE THE MAGIC!! </button>

完美。

动态加载样式表

3 个答案: