动态样式类封装JS代码


Posted in Javascript onSeptember 02, 2009

文件名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>
Javascript 相关文章推荐
js Dialog 实践分享
Oct 22 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
Nuxt.js实战详解
Jan 18 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
Nuxt 项目性能优化调研分析
Nov 07 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
JS URL传中文参数引发的乱码问题
Sep 02 #Javascript
FF IE兼容性的修改小结
Sep 02 #Javascript
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 #Javascript
获取URL地址中的文件名和参数的javascript代码
Sep 02 #Javascript
Javascript 判断函数类型完美解决方案
Sep 02 #Javascript
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 #Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 #Javascript
You might like
php高级编程-函数-郑阿奇
2011/07/04 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
javascript表单正则应用
2017/02/04 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
js实现全选和全不选
2020/07/28 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
对python判断是否回文数的实例详解
2019/02/08 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
python实现扫雷小游戏
2020/04/24 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
教学大赛获奖感言
2014/01/15 职场文书
《在家里》教后反思
2014/03/01 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
个人优缺点总结
2015/02/28 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript
python套接字socket通信
2022/04/01 Python