动态样式类封装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英文日期(有时间)选择器
May 02 Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 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
把77A收信机改造成收音机
2021/03/02 无线电
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
PHP count()函数讲解
2019/02/03 PHP
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
python fabric实现远程操作和部署示例
2014/03/25 Python
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
Python实现KNN邻近算法
2021/01/28 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
环境工程大学生自荐信
2013/10/21 职场文书
幼儿园大班毕业感言
2014/02/06 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
初级会计求职信范文
2014/02/15 职场文书
厂长岗位职责
2014/02/19 职场文书
授权委托书(完整版)
2014/09/10 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书