JavaScript and Jquery dynamically load Js files and Css files

Loading CSS dynamically in JS is of great significance in the UI for changing themes. You can choose your preferred page display mode based on your browsing habits. There are three main methods for loading CSS dynamically, the following is a detailed description. If you have many associated CSS files to be loaded together, or want to dynamically load different CSS files, the following methods must be helpful to you.

(1) use JavaScript to dynamically load Js files

/* JavaScript dynamic loading of Js files */var scriptNode = document. createElement ('script'); scriptNode. src = 'proxy. js? T = '+ new Date (). getTime ();/* with the time parameter to prevent caching */document. head. appendChild (scriptNode );

(2) use JavaScript to dynamically load css files

/* JavaScript dynamic loading of Css files */var cssNode = document. createElement ('link'); cssNode. rel = 'stylesheet '; cssNode. type = 'text/css '; cssNode. media = 'screen'; cssNode. href = 'style.css? T = '+ new Date (). getTime ();/* with time parameters to prevent caching */document. head. appendChild (cssNode );

(3) Jquery dynamically loads Js and Css extensions

$.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 + ">");        }   }});

Usage:

$.include('www.phpernote.com/file/ajaxa.js');$.include('www.phpernote.com/file/ajaxa.css');

Or:

$.includePath='www.phpernote.com/file/';$.include(['ajaxa.js','ajaxa.js']);

Articles you may be interested in

• How to Use jquery. lazyload to dynamically delay page image loading
• Summary of the string truncation function implemented by javascript (including introduction to the use of Js to intercept Chinese characters)
• JQuery adds Event Response to dynamically generated content (jquery live Method Introduction)
• Jquery checks whether the page has been loaded with the jquery File
• Php clears (deletes) the files in the specified directory, and does not delete the directory folder.
• It would be better to load jquery library files with Google
• Jquery + html + php implement Ajax without refreshing File Upload
• Use SecureCRT to upload and download files (using sz and rz commands)