动态加载CSS文件的方法
如果你不想每次都改动css文件，而是像淘宝，阿里妈妈那样做动态的CSS，那样你每个历史版本的css都将在网站上面，随时都可以用。
如果你有很多关联的CSS文件要一起加载，或者想动态的加载不同的CSS文件，那么下面的方法你一定对你有帮助。
第一种：一般用在外部CSS文件中加载必须的文件 @import url(style.css);/*只能用在CSS文件中或者style标签中*/
第二种：简单的在页面中加载一个外部CSS文件 document.createStyleSheet(cssFile);
第三种：用createElement方法创建CSS的Link标签 var head = document.getElementsByTagName(’HEAD’).item(0); var style = document.createElement(’link’); style.href = ’style.css’; style.rel = ’stylesheet’ style.type = ‘text/css’; head.appendChild(style);
下面是JavaScript的一个动态加载CSS的函数实例。 测试一下就知道了。
function loadJs(file){
var scriptTag = document.getElementById(’loadScript’);
var head = 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);
}
function loadCss(file){
var cssTag = document.getElementById(’loadCss’);
var head = 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);
}
再加一个别人的js脚本。
/**
* dynamic-style.js
* 作者: 不详
* 时间: 2006 年 11 月 26 日
*/
( function() {
var drv = {}; window.Driver = drv;
if(document.all) { // For IE
drv.XMLHttpRequest = function() {
var xmlhttp = null;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) {
try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (E) { xmlhttp = false; } }
@end @*/
return xmlhttp;
};
window.DynamicStyle = function(s) {
var uid = __push__(s);
document.createStyleSheet(’"’ + uid + ‘");’);
};
window.__tmp__ = {};
window.__push__ = function(s) {
var uid = "_" + Math.ceil(Math.random() * 16777216) + "_" + (new Date()).getTime();
window.__tmp__[uid] = s;
return uid;
};
window.__pop__ = function(uid) {
var s = window.__tmp__[uid];
window.__tmp__[uid] = undefined;
return s
};
} else { // For Gecko
drv.XMLHttpRequest = function() {
return xmlhttp = new XMLHttpRequest();
};
window.DynamicStyle = function(s) {
var d = document.createElement(’STYLE’); d.type = ‘text/css’;
document.body.appendChild(d);
d.innerHTML = s;
};
} // Driver End
window.LazyLoadStyle = function(url) {
var xh = Driver.XMLHttpRequest();
xh.onreadystatechange = function() {
if(xh.readyState == 4) {
if(xh.status == 200) {
DynamicStyle(xh.responseText);
} else {
alert(’糟糕, 下载失败!’);
}
}
};
xh.open(’GET’, url, true); xh.send(null);
};
} )();
没有评论▼