jquery Dynamic Loading CSS file implementation method _jquery

Sometimes we might need to use jQuery to load an external CSS file, such as when switching page layouts. The idea is to create a LINK element and add it to the tag, and see how you can use JQuery first.

Below is my favorite writing:

$ ("<link>")
. attr ({rel: "stylesheet",
Type: "Text/css",
href: "Site.css"
})
. Appendto (" Head ");

Some friends may use the wording below, but there are some small differences in form (append appendto), the principle is the same.

$ ("Head"). Append ("<link>");
CSS = $ (' head '). Children (": Last");
Css.attr ({
rel: "stylesheet",
Type: "Text/css",
href: "/content/site.css"
});

Finally, some friends may want to use it directly in JavaScript by using the following methods:

function Addcss () {
var link = document.createelement (' link ');
Link.type = ' text/css ';
Link.rel = ' stylesheet ';
Link.href = '/content/site.css ';
document.getElementsByTagName ("Head") [0].appendchild (link);
}

If this is a web interaction, we can use the above method to introduce a CSS file through jQuery or JavaScript, or we recommend using the original method.

Below I also introduce an example of a loadable js,css

The code is as follows

$.extend ({
includepath: ",
include:function (file) {
var files = typeof File = =" string "? [File]:file;
for (var i = 0; i < files.length i++) {
var name = Files[i].replace (/^s|s$/g, "");
var att = name.split ('. ');
var ext = att[att.length-1].tolowercase ();
var iscss = ext = "CSS";
var tag = iscss? "Link": "Script";
var attr = iscss? "Type= ' text/css ' rel= ' stylesheet '": "language= ' JavaScript ' type= ' Text/javascript '";
var link = (iscss? "href": "src") + "= '" + $.includepath + name + "'";
if ($ (tag + "[" + link + "]"). Length = = 0 document.write ("<" + tag + attr + link + "></" + tag + ">");
}
}
});
Use method
$.includepath = ' http://hi.xxx/javascript/'; 
$.include ([' Json2.js ', ' jquery.tree.js ', ' jquery.tree.css ']);

A complete instance of

Index.html

<!--Created by Barrett at rrpowered.com--> <!--File name index.html-->