html javaScript.stylesheet.html - 使用javaScript动态创建和修改样式表。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html javaScript.stylesheet.html - 使用javaScript动态创建和修改样式表。相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lab</title>
<link rel="shortcut icon" href="../favicon.ico">
</head>
<body>
<style type="text/css" >
#pid {color: red;}
</style>
<p id="pid">22 </p >
<input type="button" name="test" value=" test " />
</body>
</html>
<script>
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];
};
var btn = document.getElementsByName('test')[0];
btn.onclick =function () {
var sheet = new styleSheet(0);
sheet.setRuleStyle("#pid","color","green");
}
</script>以上是关于html javaScript.stylesheet.html - 使用javaScript动态创建和修改样式表。的主要内容，如果未能解决你的问题，请参考以下文章