如何实现JavaScript动态加载CSS和JS⽂件
项⽬中需要⽤到动态加载CSS ⽂件，整理了⼀下，顺便融合了动态加载JS 的功能写成了⼀个对象，先上代码：
var dynamicLoading = {
css: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !');
}
var head = ElementsByTagName('head')[0];
var link = ateElement('link');
link.href = path;
head.appendChild(link);
},
js: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !');
}
var head = ElementsByTagName('head')[0];
var script = ateElement('script');
script.src = path;
head.appendChild(script);
}
}
对象包含两个完全独⽴的⽅法，分别⽤来加载CSS ⽂件和JS ⽂件，参数均为欲加载的⽂件路径。原理⾮常的简单：对于不同的加载⽂件类型创建不同的节点，然后添加各⾃的属性，最后扔到head 标签⾥⾯。经测试，本⽅法兼容各浏览器，安全、⽆毒、环保，是 web 开发⼈员⼯作常备代码。
css和html和js怎么结合下⾯是调⽤代码，异常简单：
//动态加载 CSS ⽂件
dynamicLoading.css("test.css");
//动态加载 JS ⽂件
dynamicLoading.js("test.js");
动态加载js和css
开发过程中经常需要动态加载js和css，今天特意总结了⼀下常⽤的⽅法。
1、动态加载js
⽅法⼀：动态加载js⽂件
// 动态加载js脚本⽂件
function loadScript(url) {
var script = ateElement("script");
script.src = url;
document.body.appendChild(script);
}
// 测试
loadScript("javascript/lib/cookie.js");
⽅法⼆：动态加载js脚本
// 动态加载js脚本
function loadScriptString(code) {
var script = ateElement("script");
try{
// firefox、safari、chrome和Opera
script.ateTextNode(code));
}catch(ex) {
// IE早期的浏览器 ，需要使⽤script的text属性来指定javascript代码。
< = code;
}
document.body.appendChild(script);
}
// 测试
var text = "function test(){alert('test');}";
loadScriptString(text);
test();
2、动态加载css
⽅法⼀：动态加载css⽂件
// 动态加载css⽂件
function loadStyles(url) {
var link = ateElement("link");
link.href = url;
}
// 测试
loadStyles("css/secondindex.css");
⽅法⼆：动态加载css脚本
// 动态加载css脚本
function loadStyleString(cssText) {
var style = ateElement("style");
try{
// firefox、safari、chrome和Opera
style.ateTextNode(cssText));
}catch(ex) {
// IE早期的浏览器 ，需要使⽤style元素的stylesheet属性的cssText属性
style.styleSheet.cssText = cssText;
}
}
// 测试
var css = "body{color:blue;}";
loadStyleString(css);
⽐较直接的代码
var head = ElementsByTagName('head')[0];
var link = ateElement('link');
link.href = "/css/indexIE.css";
head.appendChild(link);
以上就是告诉⼤家如何实现JavaScript动态加载CSS和JS⽂件，希望对⼤家的学习有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。