Question

js怎样动态调用外部CSS？

<script language="javascript">
//定义外部连接CSS的网址，数组
var indexstyle=new Array(2);
indexstyle[0]="<link rel='stylesheet' type='text/css' href='index0.css'>";
indexstyle[1]="<link rel='stylesheet' type='text/css' href='index1.css'>";
indexstyle[2]="<link rel='stylesheet' type='text/css' href='index2.css'>";
document.write(indexstyle[0]);
function color0() {
document.write(indexstyle[0]);
}
function color1() {
document.write(indexstyle[1]);
}
function color2() {
document.write(indexstyle[2]);
}
</script>

<a href="javascript:void(0)" onClick="color0()"><span style="color:green">█</span></a>
<a href="javascript:void(0)" onClick="color1()"><span style="color:blue">█</span></a>
<a href="javascript:void(0)" onClick="color2()"><span style="color:skyblue"span>█</a>

运行结果确是在新网页中只输出了<link rel='stylesheet' type='text/css' href='index0.css'> ，并不能动态调用。
请高手看看这段代码错在哪里？

Answer 1

<style>
body{ color:#FF0000}
a:hover{ background:#00ccFF}
</style>
<script language="javascript">
var indexcss=new Array()
indexcss[0]='index0.css'
indexcss[1]='index1.css'
indexcss[2]='index2.css'
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)
}
document.getElementsByTagName("head")[0].appendChild(fileref)
</script>

<a href="#" onClick="loadjscssfile(indexcss[0],'css')">1111css</a>
<a href="#" onClick="loadjscssfile(indexcss[1],'css')">2222css</a>
<a href="#" onClick="loadjscssfile(indexcss[2],'css')">3333css</a>

Answer 2

js调用外部css用这样的语句：
var head = document.getElementsByTagName('HEAD').item(0);
var style = document.createElement('link');
style.href = 'index0.css';
style.rel = 'stylesheet';
style.type = 'text/css';
head.appendChild(style);