动态样式类封装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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
js资料prototype 属性
Mar 13 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
让人蛋疼的JavaScript语法特性
Sep 30 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
vue和小程序项目中使用iconfont的方法
May 19 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 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环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
PHP的可变变量名的使用方法分享
2012/02/05 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
Js apply方法详解
2017/02/16 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
python概率计算器实例分析
2015/03/25 Python
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
Europcar比利时:租车
2019/08/26 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
工作年限证明模板
2014/11/01 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
2014年稽查工作总结
2014/12/20 职场文书
校友回访母校寄语
2015/02/26 职场文书