javascript StyleSheet样式操作类
来源:互联网 发布:淘宝提高流量的方法 编辑:程序博客网 时间:2024/04/29 09:25
早上在csdn上看有人问页面style sheet怎么修改里面的rule,就写了个类,该类对兼容FF和IE做了处理。
/**//*--------------------------------------------
描述 : 添加新的样式rule
参数 : styleSheets索引
代码 : var ss = new styleSheet(0);
--------------------------------------------*/
var styleSheet = function(n)
...{
var ss;
if (typeof n == "number") ss = document.styleSheets[n];
this.sheet = ss;
this.rules = ss.cssRules?ss.cssRules:ss.rules;
};
/**//*--------------------------------------------
描述 : 查找样式rule,成功返回index,否则返回-1
参数 : n为rule名称
代码 : var ss = new styleSheet(0);
ss.indexOf("className")
--------------------------------------------*/
styleSheet.prototype.indexOf = function(selector)
...{
for(var i=0;i<this.rules.length;i++)
...{
if(this.rules[i].selectorText==selector)
...{
return i;
}
}
return -1;
};
/**//*--------------------------------------------
描述 : 删除样式rule
参数 : n为rule索引或者名称
代码 : var ss = new styleSheet(0);
ss.removeRule(0) || ss.removeRule("className")
--------------------------------------------*/
styleSheet.prototype.removeRule = function(n)
...{
if(typeof n == "number")
...{
if(n<this.rules.length)
...{
this.sheet.removeRule?this.sheet.removeRule(n):this.sheet.deleteRule(n);
}
}else
...{
var i = this.indexOf(n);
this.sheet.removeRule?this.sheet.removeRule(i):this.sheet.deleteRule(i);
}
};
/**//*--------------------------------------------
描述 : 添加新的样式rule
参数 : selector 样式rule名称
styles 样式rule的style
n 位置
代码 : var ss = new styleSheet(0);
ss.addRule("className","color:red",0);
--------------------------------------------*/
styleSheet.prototype.addRule = function(selector,styles,n)
...{
if(typeof n == "undefined")
...{
n = this.rules.length;
}
this.sheet.insertRule?this.sheet.insertRule(selector + "{" + styles + "}", n):this.sheet.addRule(selector, styles, n);
};
/**//*--------------------------------------------
描述 : 设置样式rule具体的属性
参数 : selector 样式rule名称
attribute 样式rule的属性
_value 指定value值
代码 : var ss = new styleSheet(0);
ss.setRuleStyle("className","color:","green");
--------------------------------------------*/
styleSheet.prototype.setRuleStyle = function(selector,attribute,_value)
...{
var i = this.indexOf(selector);
this.rules[i].style[attribute] = _value;
};
/**//*--------------------------------------------
描述 : 获得样式rule具体的属性
参数 : selector 样式rule名称
attribute 样式rule的属性
代码 : var ss = new styleSheet(0);
ss.getRuleStyle("className","color");
--------------------------------------------*/
styleSheet.prototype.getRuleStyle = function(selector,attribute)
...{
var i = this.indexOf(selector);
return this.rules[i].style[attribute];
};
描述 : 添加新的样式rule
参数 : styleSheets索引
代码 : var ss = new styleSheet(0);
--------------------------------------------*/
var styleSheet = function(n)
...{
var ss;
if (typeof n == "number") ss = document.styleSheets[n];
this.sheet = ss;
this.rules = ss.cssRules?ss.cssRules:ss.rules;
};
/**//*--------------------------------------------
描述 : 查找样式rule,成功返回index,否则返回-1
参数 : n为rule名称
代码 : var ss = new styleSheet(0);
ss.indexOf("className")
--------------------------------------------*/
styleSheet.prototype.indexOf = function(selector)
...{
for(var i=0;i<this.rules.length;i++)
...{
if(this.rules[i].selectorText==selector)
...{
return i;
}
}
return -1;
};
/**//*--------------------------------------------
描述 : 删除样式rule
参数 : n为rule索引或者名称
代码 : var ss = new styleSheet(0);
ss.removeRule(0) || ss.removeRule("className")
--------------------------------------------*/
styleSheet.prototype.removeRule = function(n)
...{
if(typeof n == "number")
...{
if(n<this.rules.length)
...{
this.sheet.removeRule?this.sheet.removeRule(n):this.sheet.deleteRule(n);
}
}else
...{
var i = this.indexOf(n);
this.sheet.removeRule?this.sheet.removeRule(i):this.sheet.deleteRule(i);
}
};
/**//*--------------------------------------------
描述 : 添加新的样式rule
参数 : selector 样式rule名称
styles 样式rule的style
n 位置
代码 : var ss = new styleSheet(0);
ss.addRule("className","color:red",0);
--------------------------------------------*/
styleSheet.prototype.addRule = function(selector,styles,n)
...{
if(typeof n == "undefined")
...{
n = this.rules.length;
}
this.sheet.insertRule?this.sheet.insertRule(selector + "{" + styles + "}", n):this.sheet.addRule(selector, styles, n);
};
/**//*--------------------------------------------
描述 : 设置样式rule具体的属性
参数 : selector 样式rule名称
attribute 样式rule的属性
_value 指定value值
代码 : var ss = new styleSheet(0);
ss.setRuleStyle("className","color:","green");
--------------------------------------------*/
styleSheet.prototype.setRuleStyle = function(selector,attribute,_value)
...{
var i = this.indexOf(selector);
this.rules[i].style[attribute] = _value;
};
/**//*--------------------------------------------
描述 : 获得样式rule具体的属性
参数 : selector 样式rule名称
attribute 样式rule的属性
代码 : var ss = new styleSheet(0);
ss.getRuleStyle("className","color");
--------------------------------------------*/
styleSheet.prototype.getRuleStyle = function(selector,attribute)
...{
var i = this.indexOf(selector);
return this.rules[i].style[attribute];
};
使用的例子,使用setRuleStyle方法将#pid的color改成green
<style type="text/css" >...
#pid {...}{color: red;}
</style>
<p id="pid">22 </p >
<input type="button" onclick="test()" value=" test " />
<script language="javascript" type="text/javascript" >...
function test()
...{
var sheet = new styleSheet(0);
sheet.setRuleStyle("#pid","color","green");
}
</script>
#pid {...}{color: red;}
</style>
<p id="pid">22 </p >
<input type="button" onclick="test()" value=" test " />
<script language="javascript" type="text/javascript" >...
function test()
...{
var sheet = new styleSheet(0);
sheet.setRuleStyle("#pid","color","green");
}
</script>
- javascript StyleSheet样式操作类
- javascript StyleSheet样式操作类
- QT之样式styleSheet
- styleSheet样式无效
- JavaScript操作CSS样式
- javaScript 操作Css样式
- JavaScript操作css样式
- Qt StyleSheet样式表实例
- Qt StyleSheet样式表实例
- 使用stylesheet修改keyframe样式
- QT stylesheet 操作
- QT stylesheet操作
- QT StyleSheet常见用法和样式
- 【Qt】一段QPushButton的styleSheet样式分享
- QT QPushButton 通过stylesheet 设置样式
- React Native之StyleSheet样式表
- QT QPushButton 通过stylesheet 设置样式
- Qt自定义Qmenu样式,使用Stylesheet
- Asp.Net中常见的问题(一)
- 银行自助设备详细介绍(二)——多媒体查询机
- 静态方法与实例方法
- 雨林木风
- 1024
- javascript StyleSheet样式操作类
- 分布式查询
- 一个简单的js实现的隔行变色脚本
- SQL SERVER恢复体系结构
- 程序员面试题精选(8):求1+2+...+n
- ubuntu7.10不能重命名的解决方法
- 关于VS2005 无法使用切换到设计视图的解决方法(转)
- asp.net(c#)页面加载时添加控件的属性和回车问题
- sql语句统计最大值和选择最多的10条