9

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

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

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

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

我知道我可以在这样的内联样式的帮助下做到这一点：

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

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

4

3 回答 3

17

您应该研究异步加载资产，例如著名的 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 中有一个标签。

于 2013-08-29T12:13:38.537 回答
3

您可以使用 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)
于 2013-08-29T12:08:11.857 回答
3

我只是试图为我的网页提供动态样式。我用了一个按钮。单击它后，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);
 }

它工作得很好。

于 2017-06-26T11:31:35.340 回答