动态样式类封装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实现表单checkbook获取已选择的值
Jul 21 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
Vue实现动态查询规则生成组件
May 27 Vue.js
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 防止单引号,双引号在接受页面转义
2008/07/10 PHP
php获取参数的几种方法总结
2014/02/18 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
php探针不显示内存解决方法
2019/09/17 PHP
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
js Math 对象的方法
2013/09/01 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
js选择器全面解析
2016/06/27 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
利用python画一颗心的方法示例
2017/01/31 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
Python数据结构之单链表详解
2017/09/12 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
Python学生信息管理系统修改版
2018/03/13 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
什么是跨站脚本攻击
2014/12/11 面试题
博士学位自我鉴定范文
2013/12/26 职场文书
工商管理专业自荐信
2014/06/03 职场文书
工地安全标语
2014/06/07 职场文书
节约能源标语
2014/06/17 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
话题作文之自信作文
2019/11/15 职场文书
python如何在word中存储本地图片
2021/04/07 Python