动态样式类封装JS代码

213 阅读 0 评论 141 点赞

我是靠谱客的博主眯眯眼故事，最近开发中收集的这篇文章主要介绍动态样式类封装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"><!-- 
var ss = new StyleSheet(); 
window.onload = function() { 
ss.AddRule(".test", "color:#FF0000; background-color:#F0F0F0; font-size:12px; border:solid 1px #A0A0A0;"); 
} 
function Set() { 
var r = ss.getRule(".test"); 
var slt = document.getElementById("tbSelector").value; 
var v = document.getElementById("tbValue").value; 
var style = r.style; 
style[slt] = v; 
} 
// --></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> 