javascript 动态加载 css 方法总结

1. 用在外部CSS文件中加载必须的文件
@importurl(style.css);
//只能用在CSS文件中或者style标签中
2. 简单的在页面中加载一个外部CSS文件
document.createStyleSheet(cssFile);
2. 用createElement方法创建CSS的Link标签
varhead=document.getElementsByTagName('HEAD').item(0);
varstyle=document.createElement('link');
style.href='style.css';
style.rel='stylesheet';
style.type='text/css';
head.appendChild(style);
下面是经常会用到的两个函数.


代码如下:

functionloadJs(file){
  varscriptTag=document.getElementById('loadScript');
  varhead=document.getElementsByTagName('head').item(0);
  if(scriptTag)head.removeChild(scriptTag);
  script=document.createElement('script');
  script.src="../js/mi_"+file+".js";
  script.type='text/javascript';
  script.id='loadScript';
  head.appendChild(script);
}
functionloadCss(file){
  varcssTag=document.getElementById('loadCss');
  varhead=document.getElementsByTagName('head').item(0);
  if(cssTag)head.removeChild(cssTag);
  css=document.createElement('link');
  css.href="../css/mi_"+file+".css";
  css.rel='stylesheet';
  css.type='text/css';
  css.id='loadCss';
  head.appendChild(css);
}

(0)

相关推荐

  • 动态加载js和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.get

  • 多浏览器兼容的动态加载 JavaScript 与 CSS第1/2页

    在介绍ensure内部的实现之前,让我们先来看看其功能: ensure({ html: "popup.html", javascript: "popup.js", css: "popup.css" }, function() { Popup.show("hello world"); } ); 在这段代码中,ensure首先会确保popup.html.popup.js.popup.css这3个文件的加载,如果都没加载过ensur

  • 动态加载js、css等文件跨iframe实现

    1.动态加载js,css文件(用原生js和jquery) iframe结构: frame0(父) frame2(子) frame3(子) frame2中触发事件,动态的向frame3中 加载js.css文件和 dom元素? *同级之间可以调用,可以 通过 子-父-子 的方式调用同级 parent.parentFram("这个方法在调用其他子farme"); 1.jquery的append() 复制代码 代码如下: 速度快,同步(需要引入jquery) var oBody = docum

  • 一个简单的动态加载js和css的jquery代码

    一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include('file/ajaxa.js');$.include('file/ajaxa.css'); //or $.includePath = 'file/';$.include(['ajaxa.js','ajaxa.css']);(only if .js and .css files are in the

  • 异步动态加载js与css文件的js代码

    jquery动态加载css,js文件方法简单很, 例 方法1: 代码如下 复制代码 代码如下: $.getscript("test.js"); 方法2: 代码如下 复制代码 代码如下: function loadjs(file){ var head = $('head').remove('#loadscript'); $("<scri"+"pt>"+"</scr"+"ipt>").a

  • 如何使用jquery动态加载js,css文件实现代码

    使用jquery动态加载js,css文件 复制代码 代码如下: $.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 =

  • 动态加载js、css的实例代码

    一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.

  • javascript 动态加载 css 方法总结

    1. 用在外部CSS文件中加载必须的文件 @importurl(style.css); //只能用在CSS文件中或者style标签中 2. 简单的在页面中加载一个外部CSS文件 document.createStyleSheet(cssFile); 2. 用createElement方法创建CSS的Link标签 varhead=document.getElementsByTagName('HEAD').item(0); varstyle=document.createElement('link'

  • 如何实现JavaScript动态加载CSS和JS文件

    项目中需要用到动态加载CSS 文件,整理了一下,顺便融合了动态加载JS 的功能写成了一个对象,先上代码: var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argument "path" is required !'); } var head = document.getElementsByTagName('head')[0]; var link =

  • 动态加载css方法实现和深入解析

    一.方法引用来源和应用 此动态加载css方法 loadCss,剥离自Sea.js,并做了进一步的优化(优化代码后续会进行分析). 因为公司项目需要用到懒加载来提高网站加载速度,所以将非首屏渲染必需的css文件进行动态加载操作. 二.优化后的完整代码 /* * @function 动态加载css文件 * @param {string} options.url -- css资源路径 * @param {function} options.callback -- 加载后回调函数 * @param {s

  • IE8中使用javascript动态加载CSS的解决方法

    众所周知做前端开发的都恨不得踹IE开发者几脚,IE开发者名声之差不低于GFW开发者,昧着良心搞坏市场,人人得而诛之,但是在中国这些地方市场占有率摆在那里,没办法只能向现实低头. 最近我们产品需要在浏览器里动态载入一段CSS,以前的代码是直接用的: 复制代码 代码如下: var bubbleCss = document.createElement('style');bubbleCss.type = 'text/css';bubbleCss.innerHTML = blc_conf.bubbleSt

  • 使用javaScript动态加载Js文件和Css文件

    JS动态加载CSS 在可换主题的界面中具有很重要的意义,用户可以根据自己的浏览习惯选择自己喜欢的页面显示方式,下面详细说明. 希望下面的方法对你有帮助. (1)使用JavaScript动态加载Js文件 /*JavaScript动态加载Js文件*/ var scriptNode = document.createElement('script'); scriptNode.src = 'proxy.js?t='+new Date().getTime();/*附带时间参数,防止缓存*/ documen

  • JavaScript动态加载样式表的方法

    本文实例讲述了JavaScript动态加载样式表的方法.分享给大家供大家参考.具体如下: 如果需要更换皮肤,我们可以通过JS代码动态加载皮肤的样式表,下面的代码就可以做到,非常简单,你只需要把这段代码做成函数动态调用即可. var el = document.createElement('link'); el.rel = 'stylesheet'; el.type = 'text/css'; el.href = 'http://www.jb51.net/...' + 'styles.css';

  • javascript动态加载二

    在上一篇javascript动态加载中,提到了使用同步加载策略这一个方式来实现如 复制代码 代码如下: Using("jquery"); Using("User"); $("#ID").click(function(){ var user = new User(); user.name = "xx"; user.show(); }); 由于JS是单线程的,所以同步策略带来的坏处不少,比如阻止之后的代码运行.造成浏览器假死等问题

  • JavaScript动态加载重复绑定问题

    前言 在添加一条数据时,使用动态加载显示在界面,后来发现一个严重的bug,拿我做的这个便签为例,当我添加一条数据后,然后点击删除的时候,提示是否删除,如下图: 但是当我添加两条以上的数据时,删除第几条就会提示几次是否确认删除. 经过排查,终于发现问题所在. 正文 当动态添加内容后,通常会写上添加的这些div中需要用到的事件,比如click事件/chang事件等.还拿我的删除事件为例,由于删除事件必须写在添加便签的事件下,所以当添加第一条数据时,绑定一次,添加第二条时,绑定一次,添加第n条数据时,

  • javascript动态加载三

    之前两篇都介绍了,通过动态加载JS文件或者说JS模块,是怎么一步一步实现. 首先是通过同步策略来实现模块加载与回调函数之间进行分离,接着是通过异步策略来实现模块加载与回调函数之间进行分离. 这一篇,主要是为了说说怎么优化异步策略,并且实现了随意加载(非任意顺序加载模块),页面Ready之后加载文件.先接一下上一篇遗留下来的问题 1.页面Ready之后进行加载 2.随意添加模块 进行加载 看第一个问题,这个问题其实还是比较简单的,主要是监听页面的DOMContentLoaded事件,这里就不多讲解

  • Android实现ListView数据动态加载的方法

    本文实例讲述了Android实现ListView数据动态加载的方法.分享给大家供大家参考,具体如下: list.setOnScrollListener(new OnScrollListener() { //添加滚动条滚到最底部,加载余下的元素 public void onScrollStateChanged(AbsListView view, int scrollState) { // if (scrollState == OnScrollListener.SCROLL_STATE_IDLE)

随机推荐