动态加载样式表

Question

动态加载样式表

htmlcssimport

11

我知道网页的样式表可以放在head部分，但是我更喜欢将它们放在单独的文件中。现在我正在处理单页面应用程序。

在SPA中，内容是动态的，对吗？所以我不想使用link标签在head部分导入所有的样式表。我能否在需要时按需导入样式表？

我的意思是，我能否在body中添加一个链接，这样每当我的SPA加载某些动态内容时，样式表也会被加载？这样即使没有加载动态内容，我也不必加载全部样式表...

我再次强调：每当内容加载时，样式都会被加载。 我知道可以使用内联样式来实现这一点，例如：

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

但我可以使用一些动态文件导入吗？我也可以在主体中使用 link 标签吗？即使它能运行，它是否是标准的？

- Anshu Dwibhashi

3个回答

4

您可以使用JavaScript在头部区域添加/删除/编辑链接标签来添加/删除样式表文件。

代码示例：

将样式表添加到头部：

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)

- virtualmarc

我可以动态地做到这一点吗？我的意思是，在开始时，我将导入“main.css”，但是当我加载内容时，如何动态地导入文件？ - Anshu Dwibhashi

1

是的。浏览器应该在DOM更改时重新渲染当前视图。因此，如果您添加或删除样式表，则更改会直接在浏览器中发生。您也可以使用浏览器的开发人员控制台进行测试。只需在那里删除、添加或更改样式表的链接标记，样式更改就应该立即显示。 - virtualmarc

你能否给出一个带有代码的例子，我更容易理解代码呢 :) - Anshu Dwibhashi

3

我希望你能帮助我翻译一个关于IT技术的问题。需要翻译的内容如下：

我刚试图给我的网页添加动态样式，我使用了一个按钮。在点击按钮时，将使用JavaScript中的方法导入CSS。

在我的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);
 }

它完美地工作了。

- Kirankumar Ambati

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cjross · Accepted Answer

你应该考虑异步加载资源，比如著名的 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>标签。