如何动态加载外部CSS文件？ [英] How to load in an external CSS file dynamically?
问题描述
我正尝试使用外部.css页面创建一个动态页面，页面颜色将发生变化。以下是我的代码。但是当我点击 href 时，我没有得到任何输出。任何人都可以告诉我的代码有什么问题吗？
< script language =JavaScript>
函数loadjscssfile（文件名，文件类型）
{
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'）>载入oldstyle.css< / a>
我修改了我的代码，如下所示。我仍然面临着获取输出的问题。没有结果。任何人都可以请我帮忙吗？
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = iso-8859-1/>
< link rel =stylesheettype =text / csshref =css / newstyle.css/>
< script language =JavaScripttype =text / javascript>
函数loadjscssfile（文件名，文件类型）
{
if（filetype ==css）
{
var fileref = document.createElement（link）;
fileref.rel =stylesheet;
fileref.type =text / css;
fileref.href =文件名;
document.getElementsByTagName（head）[0] .appendChild（fileref）
}
}
loadjscssfile（oldstyle.css，css）
< /脚本>
< a href =javascript：loadjscssfile（'oldstyle.css'，'css'）>载入oldstyle.css< / a>
< / head>
fileref.href =文件名;
否则，您正在尝试加载名为filename的文件，而不是您传递给脚本的文件。
或者，我们很乐意使用 jQuery 库，这可以在一行中完成： 另外，关于使用setAttribute的脚本的第一个版本：由于spec的设置方式，大多数浏览器只会将setAttribute设为空的第三个参数： I'm trying to create a dynamic page using external .css pages where the page color will get changed. Below is my code. But when I click the I have modified my code as below. Still I'm facing the problem in getting output. No result. Can anyone please help me out?
Tim Goodman's answer is correct, but instead of Otherwise you're trying to load a file with the name "filename" rather than what you passed to the script. Alternately, if you're willing to use the jQuery library, this can be accomplished in one line: Also, about the first version of your script using setAttribute: Most browsers will only take setAttribute with an empty third parameter because of the way the spec is set up: 这篇关于如何动态加载外部CSS文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
$（head）。append（< link rel ='stylesheet'id ='extracss'href ='+ filename +'type ='text / css'/>）;
fileref.setAttribute（href，filename，）; href, I am not getting any output. Can anyone please tell what's the problem in my code?<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>
fileref.href = "filename"; it should be fileref.href = filename;
$("head").append("<link rel='stylesheet' id='extracss' href='"+filename+"' type='text/css' />");
fileref.setAttribute("href", filename, "");
