cssCtrl :function () {
return {
getSheet: function getStyleSheet(unique_title) {
for (var i = 0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets[i];
if (sheet.title === unique_title) {
return sheet;
}
}
},
insertCssRule: function(selectorText, cssText, position){
var sheet = this.getSheet('albumCssObj');
// console.log('sheet', sheet);
if (sheet.insertRule) {
// console.log('cssText', selectorText + '{'+ cssText +'}');
sheet.insertRule(selectorText + '{'+ cssText +'}', position);
}
else if (sheet.addRule) { //仅对IE有效
sheet.addRule(selectorText, '{'+ cssText +'}', position);
}
},
deleteCssRule: function(){
var sheet = this.getSheet('albumCssObj');
// var rules = sheet.rules || sheet.cssRules;//取得规则列表
while ((sheet.rules || sheet.cssRules).length>0) {
sheet.deleteRule(0);
// console.log('deleteRule!', (sheet.rules || sheet.cssRules).length);
if((sheet.rules || sheet.cssRules).length>0) {
if (sheet.deleteRule) {
sheet.deleteRule(0);
} else if(sheet.deleteRule) {
//仅对IE有效
sheet.removeRule(0);
}
}
}
// console.log('sheet', sheet);
// console.log('rules', rules);
}
};
},
解释:
因为只能遍历 document.styleSheets 去取全局的html里的css
所以定义一个title即可类似id一样获取
因为每一个样式都是一个position,所以每次修改样式最好清空,重新写入。
insertRule插入的是 原生的css,注意分号分隔:;
后面的参数position是一个类名算一行占一个位置
如 .a{} 是0
.b{}则是1