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

Pat*_*tel 11 html javascript css

我正在尝试使用外部.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> 
Run Code Online (Sandbox Code Playgroud)

我修改了我的代码如下.我仍然面临着获得输出的问题.没有结果.有人可以帮帮我吗?

<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>
Run Code Online (Sandbox Code Playgroud)

Tim*_*man 16

试试这个:

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


vil*_*mer 11

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


chi*_*rag -7

' document.createElement("link") ' 创建超链接对象,而不是 css 样式 tag() 元素,因此您无法动态应用它

如果我错了请纠正我