动态样式类封装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 相关文章推荐
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
十分钟教你上手ES2020新特性
Feb 12 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 Javascript
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+DBM的同学录程序(3)
2006/10/09 PHP
php smarty的预保留变量总结
2008/12/04 PHP
PHP form 表单传参明细研究
2009/07/17 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
PHP缓冲区用法总结
2016/02/14 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
javascript定时器完整实例
2015/02/10 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
编程语言Python的发展史
2014/09/26 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
英国网上电器商店:Electricshop
2020/03/15 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
怎样有效的进行自我评价
2013/10/06 职场文书
主持人演讲稿范文
2013/12/28 职场文书
人力资源管理求职信
2014/08/07 职场文书
会议欢迎词
2015/01/23 职场文书
护士2015年终工作总结
2015/04/29 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python
Java8中接口的新特性使用指南
2021/11/01 Java/Android
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers