JavaScript动态加载CSS的三种方法

波颖熙儿

波颖熙儿

2016-02-19 19:45

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的JavaScript动态加载CSS的三种方法教程,一起来看看吧!超容易上手~

  如果你有很多关联的CSS文件要一起加载,或者想动态的加载不同的CSS文件,那么下面的方法你一定对你有帮助。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

//第一种:一般用在外部CSS文件中加载必须的文件
@importurl(style.css);
/*只能用在CSS文件中或者style标签中*/
//第二种:简单的在页面中加载一个外部CSS文件
document.createStyleSheet(cssFile);
//第三种:用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);

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  这里贴上我以前在项目中使用的几个函数,希望对大家有用!

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);
}

展开更多 50%)
分享

猜你喜欢

JavaScript动态加载CSS的三种方法

Web开发
JavaScript动态加载CSS的三种方法

用javascript实现页面打印的三种方法

Web开发
用javascript实现页面打印的三种方法

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS代码中进行注释的三种方法

Web开发
CSS代码中进行注释的三种方法

动态加载js的几种方法

Web开发
动态加载js的几种方法

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

治疗便秘三种方法

疾病预防
治疗便秘三种方法

三种方法疗效好

疾病预防
三种方法疗效好

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

CSS的长度单位(em)与em标签

CSS的长度单位(em)与em标签

你上传了她的照片,我知道她在你心中的份量了.

你上传了她的照片,我知道她在你心中的份量了.
下拉加载更多内容 ↓