动态样式类封装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 相关文章推荐
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
JS实现标签滚动切换效果
Dec 25 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 Javascript
JavaScript编码小技巧分享
Sep 17 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显示时间常用方法小结
2015/06/05 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
php array_map()函数实例用法
2021/03/03 PHP
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
Angular排序实例详解
2017/06/28 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
学习python (2)
2006/10/31 Python
下载给定网页上图片的方法
2014/02/18 Python
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
python中sys.argv函数精简概括
2018/07/08 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
python调用私有属性的方法总结
2020/07/24 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
业务经理岗位职责
2013/11/11 职场文书
学校安全生产承诺书
2014/05/23 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
经理聘任证明
2015/03/02 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL