【メモ】『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++);
			}
		}
	}
}