如何动态加载外部 CSS 文件?

Posted

技术标签:

【中文标题】如何动态加载外部 CSS 文件?【英文标题】:How to load in an external CSS file dynamically? 【发布时间】:2011-01-07 03:45:45 【问题描述】:

我正在尝试使用将更改页面颜色的外部 .css 页面创建动态页面。下面是我的代码。但是当我点击href 时,我没有得到任何输出。谁能告诉我我的代码有什么问题?

<script language="javascript">
function loadjscssfile(filename, filetype)

    if (filetype=="css")
     
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)


loadjscssfile("mystyle.css", "css") 
</script>
<a href="javascript:loadjscssfile('oldstyle.css','css')">Load "oldstyle.css"</a> 

我修改了我的代码如下。尽管如此,我仍然面临着获得输出的问题。没有结果。谁能帮帮我?

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/newstyle.css" />
<script language="JavaScript" type="text/javascript">
function loadjscssfile(filename, filetype)

    if (filetype=="css") 
    
        var fileref = document.createElement("link");
        fileref.rel = "stylesheet";
        fileref.type = "text/css";
        fileref.href = "filename";
        document.getElementsByTagName("head")[0].appendChild(fileref)
    

loadjscssfile("oldstyle.css", "css") 
</script>
<a href="javascript:loadjscssfile('oldstyle.css','css')">Load "oldstyle.css"</a> 
</head>

【问题讨论】:

但是,您可以在 css 中添加几行,为 body 元素使用不同的类。然后使用 jquery/javascript 动态更改其类。这样你就不需要再提出请求了。 注意:标签属于标签内。 这个可以用:asimishaq.com/dynamically-loading-css-and-js-files 【参考方案1】:

' document.createElement("link") ' 创建超链接对象,而不是 css 样式的 tag() 元素,所以你不能动态应用它

如果我错了请纠正我

【讨论】:

这是不正确的。这是一个 元素,这正是他想要加载到外部样式表中的内容。【参考方案2】:

该代码应该可以工作,除非您可能想将 type="text/javascript" 添加到您的脚本标签。

我通过 Firebug 测试了代码,它对我有用。

也许问题是您的原始样式表仍然包含在页面中,从而覆盖了您的辅助样式表的样式?

【讨论】:

【参考方案3】:

试试这个:

var fileref = document.createElement("link");
fileref.rel = "stylesheet";
fileref.type = "text/css";
fileref.href = "filename";
document.getElementsByTagName("head")[0].appendChild(fileref)

【讨论】:

我不知道为什么它不适合你。 . .您的浏览器是否报告任何 javascript 错误?您能否确认该函数正在被调用,并且它已到达将附加链接的行(例如通过在其中粘贴警报并查看它是否被调用)?另外,你用的是什么浏览器,什么版本?如果您能回答这些问题,我会尽力提供更多帮助。【参考方案4】:

使用此代码

document.getElementsByTagName("head")[0].appendChild('<link href="style.css" rel="stylesheet" type="text/css" />');

它可能会起作用,您的代码可能会起作用,但由于其他一些 CSS,它不会反映。

【讨论】:

【参考方案5】:

改变这个

<a href="javascript:loadjscssfile('oldstyle.css','css')">Load "oldstyle.css"</a> 

<a href="javascript:void(0)" onclick="loadjscssfile('oldstyle.css','css');">Load "oldstyle.css"</a> 

我相信 onclick,href 事件会重新加载新文件。

【讨论】:

【参考方案6】:

首先,&lt;head&gt; 部分中不能有锚元素。其次,你确定你的 CSS 路径是正确的吗?我问是因为您已经引用了css/newstyle.css,但您正在尝试加载newstyle.css。确定不是css/newstyle.css

编辑: Here 是您自己的代码的工作示例。还有其他问题。尝试静态链接 CSS 并查看是否获得样式。如果没有,您的样式表中可能有错误。

通过静态链接样式表,我的意思是在您的页面中添加它而不是从 javascript 加载

<link rel="stylesheet" type="text/css" href="css/oldstyle.css" />

【讨论】:

嗨,我已将其从 newstyle.css 更改为 css/newstyle.css 但仍然无法正常工作 那么,文件夹中是否存在文件? 是的,它在同一个文件夹中的路径是正确指定的,这是肯定的 如果通过链接标签静态链接它是否有效?您确定样式表中没有错误吗? 是的,我试过了,当我点击链接时,它只是保持相同的颜色没有任何变化..即使它也没有显示任何错误..【参考方案7】:

Tim Goodman 的回答是正确的,但应该是 fileref.href = "filename"; 而不是 fileref.href = filename;

否则,您将尝试加载名称为“文件名”的文件,而不是您传递给脚本的文件。

或者,如果您愿意使用jQuery 库,这可以在一行中完成:$("head").append("&lt;link rel='stylesheet' id='extracss' href='"+filename+"' type='text/css' /&gt;");

另外,关于使用 setAttribute 的脚本的第一个版本:由于规范的设置方式,大多数浏览器只会采用带有空的第三个参数的 setAttribute:fileref.setAttribute("href", filename, "");

【讨论】:

【参考方案8】:

尝试在您的 html 中添加样式行并在 css 中使用 @import 来获取新文件

【讨论】:

以上是关于如何动态加载外部 CSS 文件?的主要内容,如果未能解决你的问题,请参考以下文章

如何应用 jQuery 动态加载的内联和/或外部 CSS

如何动态加载js文件

如何在js文件中动态加载另一个js文件?

如何在js文件中动态加载另一个js文件?

动态加载js和css

如何动态加载css文件