如何动态加载外部CSS与JS文件
动态加载外部CSS与JS文件使用dom创建<script>或者<link>标签，并给他们附加属性，如type等。然后使用appendChild方法把标签绑定到另一个标签，一般是绑到<head>。求详细点的代码，比如说什么什么写在那里什么什么怎么用之类的，我是菜鸟，求高手指教！
å¨æå è½½å¤é¨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 )
}
}
<script src="/include/js/menu.js" type="text/javascript" language="javascript"></script>
照着这个样子写就是了,主要的就是指定好你存放CSS和JS的路径,可以使用相对路径,就如我这样
也可以说使用绝对路径,就比如c:/include/js/menu.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);
}
就这样，动态加载不阻塞。追问
怎么还是不行啊！是新建一个JS文件 然后在页面上导这个文件 就可以了么 。还是要怎么写啊！？
举例：<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的语句！
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')
追问什么？不懂！
追答比如你要加载test.css文件到页面里，就调用xe.load.loadCss('test.css')就行了
追问- -\\ 那js文件呢 是不是每个页面都要写xe.load.loadCss('xxxxx.css')这个啊！怎么在页面上写的哦！
追答我去，推荐答案都已经选了，我不回答了，你自己去看吧
追问没选嘛！我谁也没选啊！
本回答被提问者采纳js怎样动态调用外部CSS?
function loadjscssfile(filename, filetype){ if (filetype=="css"){ \/\/判断文件类型 var fileref=document.createElement("link")fileref.setAttribute("rel", "stylesheet")fileref.setAttribute("type", "text\/css")fileref.setAttribute("href", filename)} if (typeof fileref!="undefined")...
单页应用动态加载js(js动态加载div)
1、动态加载js，css文件(用原生js和jquery)iframe结构：frame0(父)frame 2（子）frame 3（子）frame2中触发事件，动态的向frame3中加载js、css文件和dom元素？*同级之间可以调用。可以通过子-父-子的方式调用同级parent.parentFram(“这个方法在调用其他子farme”);1.jquery的append()代码如下:速度快...
怎样把外部的 CSS样式和JS文件,导入DW软件中。
1.点击站点-》新建站点，填写好你的站点名字，文件路径 2.然后点击保存之后，这个目录下的所有文件就都导入进来了，这样就能到js和css文件了。
如何导入外部JS文件和Css文件
可以在中加入标签来引入外部css文件，标签来引入js文件
怎么在页面里引入bootstrap的css和js文件?
在官网下载bootstrap的 css 和 js文件，选择第一个下载，然后复制时面的 css 和 js文件到你的文件里。引用方法： Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，是一个CSS\/HTML框架。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发。Bootstrap提供了优雅的HTML和CSS规范，它即是...
vue引入外部css和js?
首先，打开html编辑器，新建html文件，例如：index.html，填充问题基础代码。在index.html中的标签，输入js代码：$(#div2).height($(#div1).height())；。css仅仅是样式表而已，没有太多的逻辑运算功能，相反，js作为完善的脚本语言完全可以操作css样式。根据你的需求，你可以使用less，他是css预处理...
如何在WordPress上正确加载Javascript和CSS
有两种常用的 add_action 钩子可以加载 脚本和CSS到WordPress: init: 确保始终为您的网站头部加载脚本和CSS(如果使用home.php,index.php或一个模板文件),以及其他“前端”文章、页面和模板样式。 wp_enqueue_scripts:“适当”的钩子方法,并不总是有效的,根据你的WordPress设置。 下面的所有例子都在WordPress多站点模...
怎么在页面里引入bootstrap的css和js文件
1、加载js文件：var path = require('path');module.exports = { context: path.resolve('js'),entry: ".\/index",output: { path: path.resolve('build\/js\/'),publicPath: '\/public\/assets\/js\/',filename: "bundle.js"} 2、加载css文件：{test: \/\\.css$\/, loaders: 'style-loader!
js或jquery如何同步加载 html或txt或css?~
加载css. js 也一样. doucment.write("<link rel='stylesheet' href='\/fore\/nec\/css\/base.css'") 你说的将存在文件中的数据加载到页面中,也不是多大的问题.关键在于你要加载的文件是存储在客户端还是在服务端
html5引入css的方法?
01 首先新建一个文件夹，在文件夹下面建立如下图所示的文件 02 接下来用SublimeText打开HTML文件，写入HTML结构，如下图所示 03 然后我们在Head标签内用link标签引入CSS文件，如下图所示 04 最后用Script标签引入JS文件即可，如下图所示 html中如何导入css1、使用链接式 linkhref="style.css"rel="...
