如何动态加载外部CSS与JS文件
动态加载外部CSS与JS文件使用dom创建<script>或者<link>标签，并给他们附加属性，如type等。然后使用appendChild方法把标签绑定到另一个标签，...
动态加载外部CSS与JS文件使用dom创建<script>或者<link>标签，并给他们附加属性，如type等。然后使用appendChild方法把标签绑定到另一个标签，一般是绑到<head>。求详细点的代码，比如说什么什么写在那里什么什么怎么用之类的，我是菜鸟，求高手指教！
展开
5个回答
展开全部
动态加载外部css样式及css样式，参考代码如下：
// 动态加载外部js文件
var flag = true;
if( flag ){
loadScript( "js/index.js" );
};
function loadScript( url ){
var script = document.createElement( "script" );
script.type = "type/javascipt";
script.src = url;
document.getElementsByTagName( "head" )[0].appendChild( script );
};
// 动态加载js
if( flag ){
var script = document.createElement( "script" );
script.type = "text/javascript";
script.text = " ";
document.getElementsByTagName( "head" )[0].appendChild( script );
};
// 动态加载外部css样式
if( flag ){
loadCss( "css/base.css" );
};
function loadCss( url ){
var link = document.createElement( "link" );
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName( "head" )[0].appendChild( link );
};
// 动态加载css样式
if( flag ){
var style = document.createElement( "style" );
style.type = "text/css";
document.getElementsByTagName( "head" )[0].appendChild( style );
var sheet = document.styleSheets[0];
insertRules( sheet,"#gaga1","background:#f00",0 );
};
function insertRules( sheet,selectorTxt,cssTxt,position ){
if( sheet.insertRule ){ // 判断非IE浏览器
sheet.insertRule( selectorTxt + "{" + cssTxt +"}" ,position );
}else if( sheet.addRule ){ //判断是否是IE浏览器
sheet.addRule( selectorTxt ,cssTxt ,position )
}
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<link rel="stylesheet" type="text/css" href="/css/common.css" />
<script src="/include/js/menu.js" type="text/javascript" language="javascript"></script>
照着这个样子写就是了,主要的就是指定好你存放CSS和JS的路径,可以使用相对路径,就如我这样
也可以说使用绝对路径,就比如c:/include/js/menu.js
<script src="/include/js/menu.js" type="text/javascript" language="javascript"></script>
照着这个样子写就是了,主要的就是指定好你存放CSS和JS的路径,可以使用相对路径,就如我这样
也可以说使用绝对路径,就比如c:/include/js/menu.js
追问
不是这个啊。这个我知道的!
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
动态加载js:
function loadScript(url,callback){
var script = document.createElement('script');
script.type= "text/javascript";
if(script.readyState){// IE
script.onreadystatechange = function(){
if(script.readyState == 'loaded' || script.readyState == 'complete'){
script.onreadystatechange = null;
callback();
}
}
}else{ // !IE
script.onload = function(){
callback();
}
}
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
动态加载css,<style>的 onload 事件有兼容性问题，所以没法判断是否加载完了，不过问题不大，因为是样式么。
function loadStyle(url){
var link = document.createElement('link');
link.type= "text/css";
link.href = url;
link.rel ="stylesheet";
document.getElementsByTagName('head')[0].appendChild(link);
}
就这样，动态加载不阻塞。
function loadScript(url,callback){
var script = document.createElement('script');
script.type= "text/javascript";
if(script.readyState){// IE
script.onreadystatechange = function(){
if(script.readyState == 'loaded' || script.readyState == 'complete'){
script.onreadystatechange = null;
callback();
}
}
}else{ // !IE
script.onload = function(){
callback();
}
}
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
动态加载css,<style>的 onload 事件有兼容性问题，所以没法判断是否加载完了，不过问题不大，因为是样式么。
function loadStyle(url){
var link = document.createElement('link');
link.type= "text/css";
link.href = url;
link.rel ="stylesheet";
document.getElementsByTagName('head')[0].appendChild(link);
}
就这样，动态加载不阻塞。
追问
怎么还是不行啊！是新建一个JS文件 然后在页面上导这个文件 就可以了么 。还是要怎么写啊！？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我觉得你的意思是不是动态的应用样式？ 用轻量级 JavaScript 库JQuery就简单了..
举例：<tr onMouseOver='chooseOver(this)' onMouseOut='chooseOut(this)' ><td colspan='2'>选中这行CSS样式改变</td></tr>
JS文件:
function chooseOver(obj){
$(obj).addClass("mycss_1");
}
function chooseOut(obj){
$(obj).removeClass("mycss_1");
}
CSS:
.mycss_1{ color:#F00; background-color:#FC9;}
这样就是鼠标移上去自动添加样式，移走的时候去掉样式...JQuery很简单 去下载个手册看看
当然 你纯javascript代码也行 不过自己没写过肯定比较繁琐... 强烈推荐JQuery 真方便
举例：<tr onMouseOver='chooseOver(this)' onMouseOut='chooseOut(this)' ><td colspan='2'>选中这行CSS样式改变</td></tr>
JS文件:
function chooseOver(obj){
$(obj).addClass("mycss_1");
}
function chooseOut(obj){
$(obj).removeClass("mycss_1");
}
CSS:
.mycss_1{ color:#F00; background-color:#FC9;}
这样就是鼠标移上去自动添加样式，移走的时候去掉样式...JQuery很简单 去下载个手册看看
当然 你纯javascript代码也行 不过自己没写过肯定比较繁琐... 强烈推荐JQuery 真方便
追问
额，不是，是自动加载那个导入CSS或者JS的语句！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
(function(){
xe = window.xe || {};
xe.load = {
filesAdded : {},
loadScript : function(src){
if(this.filesAdded[src]){
return 0;
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
this.filesAdded[src] = true;
document.body.appendChild(script);
},
loadScriptString : function(code){
var script = document.createElement('script');
script.type = 'text/javascript';
try{
script.appendChild(document.createTextNode(code));
}catch(ex){
script.text = code;
}
document.body.appendChild(script);
},
loadCss : function(href){
if(this.filesAdded[href]){
return 0;
}
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = href;
this.filesAdded[href] = true;
document.getElementsByTagName('head')[0].appendChild(link);
},
loadCssString : function(code){
var style = document.createElement('style');
style.type = 'text/css';
try{
style.appendChild(document.createTextNode(code));
}catch(ex){
style.styleSheet.cssText = code;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
};
})();
xe = window.xe || {};
xe.load = {
filesAdded : {},
loadScript : function(src){
if(this.filesAdded[src]){
return 0;
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
this.filesAdded[src] = true;
document.body.appendChild(script);
},
loadScriptString : function(code){
var script = document.createElement('script');
script.type = 'text/javascript';
try{
script.appendChild(document.createTextNode(code));
}catch(ex){
script.text = code;
}
document.body.appendChild(script);
},
loadCss : function(href){
if(this.filesAdded[href]){
return 0;
}
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = href;
this.filesAdded[href] = true;
document.getElementsByTagName('head')[0].appendChild(link);
},
loadCssString : function(code){
var style = document.createElement('style');
style.type = 'text/css';
try{
style.appendChild(document.createTextNode(code));
}catch(ex){
style.styleSheet.cssText = code;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
};
})();
更多追问追答
追问
额，怎么没反映哦！我试了下！还是没导入哦！难道我是写的地方不对吗？
追答
xe.load.loadCss('xxxxx.css')
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
