动态样式类封装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 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
微信小程序实现日历效果
Dec 28 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
js实现拖拽与碰撞检测
Sep 18 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+jQuery实现自动补全功能源码
2013/05/15 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
jQuery参数列表集合
2011/04/06 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
python中time库的实例使用方法
2019/10/31 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
介绍一下write命令
2014/08/10 面试题
演讲稿的写法
2014/05/19 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
医院岗前培训心得体会
2016/01/08 职场文书