JS 控制CSS样式表

Posted 2020-07-16 空间机器

JS控制CSS所使用的方法:

<style> 
.rule{ 
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("rule").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>的时候以上方法可行.