javascript 动态加载 css 方法总结
javascript 动态加载 css 方法总结
发布时间:2016-12-30 来源:查字典编辑
摘要:1.用在外部CSS文件中加载必须的文件@importurl(style.css);//只能用在CSS文件中或者style标签中2.简单的在页...

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教程学习
热门Javascript教程学习
编程开发子分类