JS 控制 CSS 样式表

JS控制CSS样式，首先得确定一点，CSS与HTML页面的链接方式，因为CSS有3种与HTML页面结合的方式，不同的方式也会产生不同的结果。在JS控制CSS样式的时候务必得注意这点。

下面先记录一下JS控制CSS所使用的方法。

1. 通过styleSheet对象数组对CSS进行操作

原始CSS

<style type="text/css"> .orig { display: none; } </style> 

你想要改变把他的display属性由none改为inline 

IE： 

document.styleSheets[0].rules[0].style.display = "inline";

 Firefox:

document.styleSheets[0].cssRules[0].style.display = "inline"; 

可以做一个函数来搜索特定名字的style对象：

function getstyle(sname) {
	for (var i = 0; i < document.styleSheets.length; i++) {
		var rules;
		if (document.styleSheets[i].cssRules) {
			rules = document.styleSheets[i].cssRules;
		}
		else {
			rules = document.styleSheets[i].rules;
		}
		for (var j = 0; j < rules.length; j++) {
			if (rules[j].selectorText == sname) {
				//selectorText 属性的作用是对一个选择的地址进行替换.意思应该是获取RULES[J]的CLASSNAME.有说错的地方欢迎指正 
				return rules[j].style;
			}
		}
	}
}

然后只要： 

getstyle(".orig").display = "inline"; 

------------------ 注意 ------------------

document.styleSheets[0].rules[0].style 

这个 styleSheets[0] 数组的下标是代表本页的第N个CSS样式表，它的下级 rules[0 ]的数组下标表示的则是这个样式表中的第N个样式，例如: 

<style type="text/css"> 
	.s{display="none";} 
	.w{display="none";} 
    </style>

修改S则： document.styleSheets[0].rules[0].style.display='inline'; 
修改W则：document.styleSheets[0].rules[1].style.display = 'inline'; 
注意：CSS和HTML结合的方式必须为<LINK rel="stylesheet" type="text/css" href="" /> 或<style></style>的时候以上方法可行 ， 如@IMPORT 则不行。