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