前言
很多时候我们需要在页面中引用外部的css文件,下面将介绍一下如何通过Jquery动态加载css文件
方式一(Jquery)
var cssFileUrl='../css/home.css';if (cssFileUrl) {$("<link>").attr({rel: "stylesheet",type: "text/css",href: cssFileUrl}).appendTo("head");}
方式二(Jquery)
var cssFileUrl='../css/home.css';$("head").append("<link>");css = $("head").children(":last");css.attr({rel: "stylesheet",type: "text/css",href: cssFileUrl});
方式三(Javascript)
var cssFileUrl='../css/home.css';function addCSS() {var link = document.createElement('link');link.type = 'text/css';link.rel = 'stylesheet';link.href = cssFileUrl;document.getElementsByTagName("head")[0].appendChild(link);}
最终效果为(引用了同样的css内容但是文件名不同)
参考自:mrr