使用 JavaScript 动态加载外部 CSS 文件 [重复]答案

【问题标题】：Dynamically loading an external CSS file using JavaScript [duplicate]使用 JavaScript 动态加载外部 CSS 文件 [重复]
【发布时间】：2011-01-07 04:02:39
【问题描述】：

可能重复：
Dynamically loading an external CSS file

我正在尝试使用将更改页面颜色的外部 .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>

【问题讨论】：

标签： javascript css

【解决方案1】：

我建议你为此使用 jquery。

发现这个很棒的article on how it can be done：

愉快的编码

【讨论】：

【解决方案2】：

如果你想在某个实例（点击）上切换网站样式，而不刷新页面，那么你需要同时使用JS和cookie。

下面的链接可能会有所帮助：

http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

【讨论】：