您的位置:首页 > Web前端 > CSS

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

2016-04-08 14:48 543 查看
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++);
}
}
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息