js换肤
2012-02-17 20:22 边缘er 阅读(131) 评论(0) 收藏 举报平时经常会遇到网站有换肤的效果(变色),这通过删除样式表和添加样式表来实现。
获取样式表
function getStyleSheets(url, media){
var sheets = [];
for (var i=0; i<document.styleSheets.length;i++){
if (url && document.styleSheets[i].href.indexOf(url) == -1){
continue;
}
if (media){
//规范化Media字符串
media = media.replace(/,\s*/, ',');
var sheetMedia;
if (document.styleSheets[i].media.mediaText){
//DOM方法
sheetMedia = document.styleSheets[i].media.mediaText.replace(/,\s*/, ',');
//Safari会添加额外的逗号和空格
sheetMedia = sheetMedia.replace(/,\s*$/, '');
}else{
//MSIE方法
sheetMedia = document.styleSheets[i].media.replace(/,\s*/, ',');
}
//如果media不匹配则跳过
if (media!=sheetMedia){
continue;
}
}
sheets.push(document.styleSheets[i]);
}
return sheets;
}
添加样式表
function addStyleSheet(url, media){
media = media || 'screen';
var newLink = document.createElement('LINK');
newLink.setAttribute('rel', 'stylesheet');
newLink.setAttribute('type', 'text/css');
newLink.setAttribute('href', url);
newLink.setAttribute('media', media);
document.getElementsByTagName('head')[0].appendChild(newLink);
}
删除样式表
function removeStyleSheet(url, media){
var styles = getStyleSheets(url, media);
for (var i=0;i<styles.length;i++){
var node = styles[i].ownerNode || styles[i].owningElement;
//禁用样式表
styles[i].disabled = true;
//移出节点
node.parentNode.removeChild(node);
}
}
浙公网安备 33010602011771号