国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > jscript > javascript 动态加载 css 的方法总结

javascript 动态加载 css 的方法总结

来源:程序员人生   发布时间:2013-10-14 19:44:48 阅读次数:2464次
  网(LieHuo.Net)讯 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);

  下面是经常会用到的两个函数.

  1. functionloadJs(file){
  2.   varscriptTag=document.getElementById('loadScript');
  3.   varhead=document.getElementsByTagName('head').item(0);
  4.   if(scriptTag)head.removeChild(scriptTag);
  5.   script=document.createElement('script');
  6.   script.src="../js/mi_"+file+".js";
  7.   script.type='text/javascript';
  8.   script.id='loadScript';
  9.   head.appendChild(script);
  10. }
  11. functionloadCss(file){
  12.   varcssTag=document.getElementById('loadCss');
  13.   varhead=document.getElementsByTagName('head').item(0);
  14.   if(cssTag)head.removeChild(cssTag);
  15.   css=document.createElement('link');
  16.   css.href="../css/mi_"+file+".css";
  17.   css.rel='stylesheet';
  18.   css.type='text/css';
  19.   css.id='loadCss';
  20.   head.appendChild(css);
  21. }
复制代码

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生