Question

我正在尝试使用外部.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>

Answer 1

试试这个：

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

Answer 2

蒂姆·古德曼的回答是正确的，但不是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, "");

Answer 3

尝试在html中添加一个样式行，然后在css中使用@import来获取新文件

Answer 4

该代码应该可以工作，除非您可能想要在脚本标记中添加type =“text / javascript”。

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

问题可能是您的原始样式表仍然包含在页面中，从而覆盖了辅助样式表的样式？

Answer 5

使用此代码

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

它可能有用，你的代码可能会工作，但由于另一个css它不会反映。

Answer 6

更改此

<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>

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

Answer 7

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

编辑： Here是您自己代码的一个有效示例。还有其他错误。尝试静态链接CSS，看看你是否得到了样式。如果没有，则样式表中可能存在错误。

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

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

Answer 8

'document.createElement（“link”）'创建超链接对象，而不是css样式标记（）元素，因此您无法动态应用此

如果我错了，请纠正我

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

8 个答案: