动态样式类封装JS代码

文件名StyleSheet.js复制代码代码如下:// CssRule类由StyleSheet.getRule方法返回，不直接创建 function CssRule(rule) { this.rule = rule; this.style = rule.style; this.selectorText = rule.selectorText; this.index = null; } function StyleSheet() { var head = document.getElementsByTagName("head")[0]; //通过新建标签来创建新样式 /* 在此不用document.createStyleSheet来完成，是因为在FF下如果未导入任何CSS文件的情况下document.createStyleSheet方法失败 */ var style = document.createElement("style"); style.type = "text/css"; head.appendChild(style); this.CatchStyle(document.styleSheets.length - 1); } StyleSheet.prototype = { //可直接捕获现有Style CatchStyle: function(index) { this.style = document.styleSheets[index]; if (navigator.userAgent.indexOf("MSIE") < 0) { //非IE浏览器补丁 this.style.addRule = function(selector, style) { var index = this.cssRules.length; this.insertRule(selector + "{" + style + "}", index); }; this.style.removeRule = function(index) { this.deleteRule(index); }; } }, //新增样式 AddRule: function(selector, style) { this.style.addRule(selector, style); }, //删除样式 RemoveRule: function(index) { this.style.removeRule(index); }, //取得所有样式 getRules: function() { if (this.style.rules) { //IE return this.style.rules; } return this.style.cssRules; //非IE }, //通过选择器，取得样式 getRule: function(selector) { var rules = this.getRules(); for (var i = 0; i < rules.length; i++) { var r = rules[i]; if (r.selectorText == selector) { var rule = new CssRule(r); rule.index = i; return rule; } } return null; } }; 调用示例代码复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="StyleSheet.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"></script> </head> <body> 样式<input id="tbSelector" type="text" value="width" /> 值<input id="tbValue" type="text" value="300px" /> <input type="button" value="设置" onclick="Set()" /> <div class="test">a</div> <div class="test">b</div> <div class="test">c</div> <div class="test">d</div> <div class="test">e</div> </body> </html>

复制代码代码如下: <script type="text/javascript"> // 说明：添加、移除、检测 className function hasClass(element, className) { var reg = new RegExp('(\s|^)'+className+'(\s|$)'); return element.cla>>>详细阅读

本文标题：动态样式类封装JS代码

地址：http://www.17bianji.com/kaifa2/JS/28187.html

1/2 1