【笔记】 《js权威指南》- 第16章 脚本化CSS 16.5 脚本化CSS类 - 16.6 脚本化样式表
2016-04-08 14:48
543 查看
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++); } } } }
相关文章推荐
- IE不支持getElementsByClassName最终完美解决方案
- Qt的核心剖析:信息隐藏
- 【笔记】 《js权威指南》- 第15章 脚本化文档 - 15.2 选取文档元素
- Swift通过类名动态创建对象的方式
- HTML5实战与剖析之classList属性
- IE 10以前的版本兼容 document element 的classList
- 脚本化CSS
- className && classList介绍
- HTML5新特性:元素的classList属性与应用
- classList API
- 解决IE8以下不支持getElementsByClassName的方法
- JavaScript基本知识
- JS模拟微信聊天
- getElementsByClassName与classList兼容性问题与解决方案
- 21、Dom元素的灵活查找--通过className条件筛选
- DOM扩展
- tab切换
- className简单应用
- classList
- jquery中.prop()和.attr()的区别 什么叫布尔型属性 property vs attributes , boolean attributes...