javascript 动态加载 css 方法总结


Posted in Javascript onJuly 11, 2009

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); 
}
Javascript 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
OpenLayers3实现图层控件功能
Sep 25 Javascript
checkbox 复选框不能为空
Jul 11 #Javascript
javascript 页面只自动刷新一次
Jul 10 #Javascript
javascript div 遮罩层封锁整个页面
Jul 10 #Javascript
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 #Javascript
javascript 读取xml,写入xml 实现代码
Jul 10 #Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 #Javascript
jquery Firefox3.5中操作select的问题
Jul 10 #Javascript
You might like
使用Apache的rewrite技术
2006/06/22 PHP
PHP安全编程之加密功能
2006/10/09 PHP
php下使用iconv需要注意的问题
2010/11/20 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
浅谈php处理后端&接口访问超时的解决方法
2016/10/29 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
Python学习之asyncore模块用法实例教程
2014/09/29 Python
Python中join和split用法实例
2015/04/14 Python
python中关于for循环的碎碎念
2017/06/30 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
银行领导证婚词
2014/01/11 职场文书
廉洁校园实施方案
2014/05/25 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python