logo标签列表

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

javascripthtmlcss
19

我正在尝试使用外部.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>
2
你可以在CSS中添加几行代码，为body元素使用不同的类。然后使用jQuery / JavaScript动态更改其类。这样，您就不需要进行另一个请求。 - Capi Etheriel
注意： <a> 标签不应该放在 <head> 标签内。 - user241244
这可以使用：http://asimishaq.com/dynamically-loading-css-and-js-files - asim-ishaq
9个回答
28

试一下这个：

var fileref = document.createElement("link");
fileref.rel = "stylesheet";
fileref.type = "text/css";
fileref.href = filename;
document.getElementsByTagName("head")[0].appendChild(fileref)
我不确定为什么对你不起作用...... 你的浏览器是否报告任何JavaScript错误？ 你能确认函数被调用了吗，并且它是否到达将附加链接的行（例如通过在其中添加警报并查看它是否被调用）？ 另外，你正在使用什么浏览器以及哪个版本？如果你能回答这些问题，我会尽力提供更多帮助。 - Tim Goodman
1
12年后，有人修复了这个答案中的错误。 :) - Tim Goodman
15

Tim Goodman的答案是正确的，但需要将fileref.href = "filename"; 更改为 fileref.href = filename;

否则你会尝试加载一个名为"filename"的文件而不是你传递给脚本的文件。

或者，如果你愿意使用jQuery库，可以用一行代码完成：
$("head").append("<link rel='stylesheet' id='extracss' href='"+filename+"' type='text/css' />");

此外，关于你脚本的第一个版本使用setAttribute：由于规范的设置方式，大多数浏览器只能将setAttribute的第三个参数设置为空：
fileref.setAttribute("href", filename, "");

有人刚刚纠正了我的答案，去掉了引号。所以，这才是你需要的答案，虽然晚了12年。很抱歉当时我没看到这个问题 :) - Tim Goodman
1
尝试在您的HTML中添加样式行，并仅在CSS中使用@import来获取新文件。
0
请使用这段代码。
document.getElementsByTagName("head")[0].appendChild('<link href="style.css" rel="stylesheet" type="text/css" />');

可能会起作用，您的代码可能有效，但由于其他一些CSS的原因，它不会反映出来。

0

更改这个

<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属性将重新加载新文件。

0

首先，你不能在 <head> 部分中有一个锚元素。其次，你确定你的 CSS 路径是正确的吗？我问这个问题是因为你已经引用了 css/newstyle.css，但是你正在尝试加载 newstyle.css。你确定它不是 css/newstyle.css 吗？

编辑：这里 是你自己代码的一个工作示例。还有其他问题。尝试静态链接 CSS 并查看是否获得样式。如果没有，可能是你的样式表中存在错误。

通过静态链接样式表，我的意思是在页面中添加这个，而不是从 JavaScript 中加载。

<link rel="stylesheet" type="text/css" href="css/oldstyle.css" />
嗨，我已将其从newstyle.css更改为css / newstyle.css，但仍然无法工作。 - Patel
这个文件在文件夹里吗？ - Chetan S
是的，它在同一个文件夹中，路径已经正确指定了，这是确定的。 - Patel
如果通过链接标签进行静态链接，它是否有效？你确定样式表中没有错误吗？ - Chetan S
是的，我也尝试过了，但当我点击链接时，它仍然保持相同的颜色，没有任何变化...甚至没有显示任何错误。 - Patel
0

那段代码应该可以工作，除非你想在脚本标签中添加type="text/javascript"。

我通过Firebug测试了这段代码，它对我有效。

也许问题在于你的原始样式表仍然包含在页面中，从而覆盖了你的次要样式表的样式？

-1

我不喜欢在文档中添加额外的链接，因为这会导致内存泄漏。

相反，我尝试了其他方法。

在文档的头部：

<head>
<link id="changeme" rel="stylesheet" type="text/css" href="css/oldstyle.css" />
<!-- moar stuff hear -->
</head>

JavaScript中：

<script language="JavaScript">
function loadFile(filename) {
  const link = document.querySelector("#changeme");
  link.href = filename;
}
const sheets = ["/css/theme1.css", "/css/theme2.css", "/css/theme3.css"];
let pos = 0;
let timer = setInterval(()=>{
  loadFile(sheets[pos]);
  pos = pos + 1;
  if (pos >= sheets.length) {
    pos = 0;
  }
}, 2000);
</script>

这个代码可以简单地替换头部中已经存在的href，使用一个方便的id进行识别。在这个示例中，每两秒钟它会从theme1移动到theme2，再到theme3，然后再回到theme1，直到有人离开页面。非常适合犹豫不决的网站。

（我不知道这个代码的可移植性如何，所以请自行判断...但它可以在Firefox和Chromium上运行，这对我的需求来说已经足够好了）。

-7
`document.createElement("link")` 创建的是超链接对象，而不是 CSS 样式标签元素，所以你无法动态地应用它。
如果我错了，请纠正我。
那是不正确的。它是一个<link>元素，这正是他想要加载外部样式表的方式。 - pib
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接