动态加载样式表

我知道你可以在页面的头部有样式表，但我喜欢把它们放在单独的文件中。现在我正在使用单页面应用程序。动态加载样式表

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

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

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

我知道我可以用内嵌式的帮助下这样做：

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

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

来源

2013-08-29 Anshu Dwibhashi

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

来源

2013-08-29 12:13:38 cjross

好吧，谢谢，但它会实际加载它，或者只是创建它是doc的虚拟节点。结构体？ –

它将加载，将开发工具放在控制台中，并带有示例链接，例如cdnjs.com中的cdn CSS文件，并在网络选项卡中查看证明 – cjross

即使没有明确创建一个头。 – Adria

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

或者您可以循环浏览头部区域中的所有链接标签并找到正确的标签，但我建议使用该标识的解决方案;）

现在你可以改变href属性：

document.getElementById('styleid').setAttribute("href", "newfilename.css");

或者你就能取出完整的标签：

var styletorem = document.getElementById('styleid'); 
styletorem.parentNode.removeChild(styletorem)

来源

2013-08-29 12:08:11

我可以动态地做到吗？我的意思是，一开始我会导入'main.css'，但我如何动态导入文件，因为我加载内容 –

是的。浏览器应该重申当前对dom变更的看法。所以如果你添加或删除样式表，改变直接发生在浏览器中。您也可以使用浏览器的开发者控制台来测试。只需删除，添加或更改样式表的链接标记，并直接看到样式更改 –

可以请示例代码，我更好地理解代码:) –

我只是试图给我的网页动态样式。我用了一个按钮。点击它后，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-26 11:31:35

动态加载样式表

回答

相关问题