【メモ】『js権威ガイド』-第16章スクリプト化CSS 16.5スクリプト化CSSクラス-16.6スクリプト化スタイルシート
3161 ワード
1.エレメントクラス名classNameを切り替えてエレメントスタイルを切り替え、複数のクラス名をスペースで区切ることができます.
2.classListプロパティを使用して、要素に複数のクラス名を設定します.
互換性の実現:
3.スクリプト化されたスタイルシート:
(1). スタイルのdisabledプロパティを設定することで、スタイルを無効にして開きます.
(2). クエリースタイルシート:
(3). 挿入と削除:
(4). 新しいスタイルシートを作成するには
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++);
}
}
}
}