【笔记】 《js权威指南》- 第16章 脚本化CSS 16.5 脚本化CSS类 - 16.6 脚本化样式表

1.通过切换元素类名className来切换元素样式， 可以通过空格隔开设置多个类名；

2.使用classList属性给元素设置多个类名：

兼容实现：

function classList(e) {
	if (e.classList) return e.classList;
	else return new CSSClassList(e);
}

function CSSClassList(e) {this.e = e;};

CSSClassList.prototype.contains = function(c) {
	if (c.length === 0 || c.indexOf(" ") != -1)
	    throw new Error("Invalid class name: '" + c + "'");
	
	var classes = this.e.className;
	
	if (!classes) return false;
	if (classes === c) return true;
	
	return classes.search("\\b" + c + "\\b") != -1;
};

CSSClassList.prototype.add = function(c) {
	if (this.contains(c)) return;
	var classes = this.e.className;
	if (classes && classes[classes.length - 1] != " ")
	    c = " " + c;
	this.e.className += c;
};

CSSClassList.prototype.remove = function(c) {
	if (c.length === 0 || c.indexOf(" ") != -1)
	    throw new Error("Invalid class name: '" + c + "'");
	    
	var pattern = new RegExp("\\b" + c + "\\b\\s*", "g");
	this.e.className = this.e.className.replace(pattern, "");
};

CSSClassList.prototype.toggle = function(c) {
	if (this.contains(c)) {
		this.remove(c);
		return false;
	}
	else {
		this.add(c);
		return true;
	}
};

CSSClassList.prototype.toString = function() {
	return this.e.className;
};

CSSClassList.prototype.toArray = function() {
	return this.e.className.match(/\b\w+\b/g) || [];
};

3.脚本化样式表:

(1). 通过设置样式的disabled属性来禁用和开启样式：

function disableStyleshet(ss) {
   if (typeof ss == "number")
        document.styleSheets[ss].disabled = true;
   else  {
        var sheets = document.querySelectorAll(ss);
       for (var i = 0; i < sheets.length; i++)
            sheets[i].disabled = true;
   }
}

(2). 查询样式表：

//非IE
var firstRule = document.styleSheets[0].cssRules[0];
// IE不适用cssRules使用rules

(3). 插入和删除：

//非IE
document.styleSheets[0].insertRule("H1 {text-weight: bold;}", 0);
documnet.styleSheets[0].deleteRule(0);
//IE使用addRule和removeRule其中addRule将选择器文本和样式文本拆开作为两个参数。

(4). 创建新样式表：

function addStyles(styles) {
	var styleElt, styleSheet;
	if (document.createStyleSheet) {
		styleSheet = document.createStyleSheet(); //IE API
	}
	else {
		var head = document.getElementsByTagName("head")[0];
		styleElt = document.createElement("style");
		head.appendChild(styleElt);
		styleSheet = document.styleSheets[document.styleSheets.length - 1];
	}
	
	if (typeof styles === "string") {
		if (styleElt) styleElt.innerHTML = styles;
		else styleSheet.cssText = styles;    //IE API
	}
	else {
		var i = 0;
		for (selector in styles) {
			if (styleSheet.insertRule) {
				var rule = selector + " {" + styles[selector] + "}";
				styleSheet.insertRule(rule, i++);
			}
			else {
				styleSheet.addRule(selector, styles[selector], i++);
			}
		}
	}
}