jQuery动态加载css文件实现方法
有时我们可能会需要使用jQuery来加载一个外部的css文件，如在切换页面布局时。思路是创建一个link元素，并将它添加到标记中即可，下边首先看看怎么使用jQuery来实现。
下边是我喜欢的写法：
$("<link>")
.attr({rel:"stylesheet",
type:"text/css",
href:"site.css"
})
.appendTo("head");
有些朋友可能会使用下边的写法，只是形式有些小差异(appendappendTo)，原理还是一样的。
$("head").append("<link>");
css=$("head").children(":last");
css.attr({
rel:"stylesheet",
type:"text/css",
href:"/Content/Site.css"
});
最后，有的朋友可能希望直接在javascript中使用，方法如下：
functionaddCSS(){
varlink=document.createElement('link');
link.type='text/css';
link.rel='stylesheet';
link.href='/Content/Site.css';
document.getElementsByTagName("head")[0].appendChild(link);
}
如果是在web交互时，我们可以使用上述的方法通过jQuery或者javascript来引入一个css文件，否则还是建议使用原始的方法。
下面我还介绍一个可加载js,css的实例
代码如下
$.extend({
includePath:'',
include:function(file){
varfiles=typeoffile=="string"?[file]:file;
for(vari=0;i<files.length;i++){
varname=files[i].replace(/^s|s$/g,"");
varatt=name.split('.');
varext=att[att.length-1].toLowerCase();
varisCSS=ext=="css";
vartag=isCSS?"link":"script";
varattr=isCSS?"type='text/css'rel='stylesheet'":"language='javascript'type='text/javascript'";
varlink=(isCSS?"href":"src")+"='"+$.includePath+name+"'";
if($(tag+"["+link+"]").length==0)document.write("<"+tag+attr+link+"></"+tag+">");
}
}
});
//使用方法
$.includePath='http://hi.xxx/javascript/';
$.include(['json2.js','jquery.tree.js','jquery.tree.css']);
一个完整的实例
index.html
<!--CreatedbyBarrettatRRPowered.com-->
<!--Filenameindex.html-->
<html>
<head>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax
/libs/jquery/1.4.4/jquery.min.js"></script>
<linkrel="stylesheet"type="text/css"href="default.css">
<title>AsimplejQueryimageslide</title>
<scripttype="text/javascript">
$(function(){
$(".theme").click(function(){
vartheme=$(this).attr("rel");
$("link").attr("href",$(this).attr('rel'));
$("head").append("<link>");
});
});
</script>
</head>
<body>
<divclass="theme"rel="blue.css">Blue</div>
<divclass="theme"rel="orange.css">Orange</div>
<divclass="theme"rel="yellow.css">Yellow</div>
<divclass="theme"rel="default.css">Default</div>
<divclass="container">
<divclass="menu">Tab1Tab2Tab3Tab4Tab5</div>
<divclass="inner">
Loremipsumdolorsitamet
</div>
<divclass="footer">copyrightyoursite2011</div>
</div>
</body>
</html>
default.css
body{
background-color:#ffffff;
font-family:"arial";
}
.theme{
margin:10px;
width:70px;
padding:5px;
text-align:center;
background-color:#BEF781;
border:solid#3333331px;
color:#444444;
font-weight:bold;
cursor:pointer;
}
.container{
margin-left:auto;
margin-right:auto;
width:700px;
}
.inner{
padding:20px;
border:solid#3333331px;
}
.menu{
background-color:#f2f2f2;
padding:10px;
font-weight:bold;
}
.footer{
background-color:#f9f9f9;
padding:5px;
}
blue.css
body{
background-color:#2E9AFE;
font-family:"arial";
}
.theme{
margin:10px;
width:70px;
padding:5px;
text-align:center;
background-color:#BEF781;
border:solid#3333331px;
color:#444444;
font-weight:bold;
cursor:pointer;
}
.container{
margin-left:auto;
margin-right:auto;
width:700px;
}
.inner{
padding:20px;
border:solid#3333331px;
background-color:#58ACFA;
color:#ffffff;
}
.menu{
background-color:#f2f2f2;
padding:10px;
font-weight:bold;
}
.footer{
background-color:#f9f9f9;
padding:5px;
}
yellow.css
body{
background-color:#F7FE2E;
font-family:"arial";
}
.theme{
margin:10px;
width:70px;
padding:5px;
text-align:center;
background-color:#BEF781;
border:solid#3333331px;
color:#444444;
font-weight:bold;
cursor:pointer;
}
.container{
margin-left:auto;
margin-right:auto;
width:700px;
}
.inner{
padding:20px;
border:solid#3333331px;
background-color:#f6f6f6;
}
.menu{
background-color:#F2F5A9;
padding:10px;
font-weight:bold;
}
.footer{
background-color:#F2F5A9;
padding:5px;
}
orange.css
body{
background-color:#FE9A2E;
font-family:"arial";
}
.theme{
margin:10px;
width:70px;
padding:5px;
text-align:center;
background-color:#BEF781;
border:solid#3333331px;
color:#444444;
font-weight:bold;
cursor:pointer;
}
.container{
margin-left:auto;
margin-right:auto;
width:700px;
}
.inner{
padding:20px;
background-color:#F7BE81;
color:#404040;
}
.menu{
background-color:#ffffff;
padding:10px;
font-weight:bold;
color:#FFBF26;
}
.footer{
background-color:#ffffff;
padding:5px;
color:#FFBF26;
}