动态样式类封装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 08 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
Javascript基础教程之变量
Jan 18 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
layui实现数据分页功能
Jul 27 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
JS常用知识点整理
2017/01/21 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
python实现猜数字小游戏
2020/03/24 Python
python字符串的拼接方法总结
2019/11/18 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
python selenium 获取接口数据的实现
2020/12/07 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
Otel.com:折扣酒店预订
2017/08/24 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
党员一句话承诺大全
2014/03/28 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
综治目标管理责任书
2015/05/11 职场文书
《叶问2》观后感
2015/06/15 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
python 闭包函数详细介绍
2022/04/19 Python
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android
nginx配置指令之server_name的具体使用
2022/08/14 Servers