document 改变css,如何在运行时更改/删除CSS类定义？

我在http://twelvestone.com/forum_thread/view/31411找到了一个答案，我在这里逐字复制了线程的某些部分，因为我担心该线程以及非常有用的答案会消失。

Flip 2006.06.26，02:45 PM — [Crunchy Frog]帖子：2470加入日期：2003.01.26

在经过大约10到12个小时的搜索，阅读和修补之后，我已经做到了！我今天是CSS / JS代码忍者！

使用的JS代码如下：

function changeRule(theNumber) {

var theRules = new Array();

if (document.styleSheets[0].cssRules) {

theRules = document.styleSheets[0].cssRules;

} else if (document.styleSheets[0].rules) {

theRules = document.styleSheets[0].rules;

}

theRules[theNumber].style.backgroundColor = '#FF0000';

}

我已经在FF(Mac)，Safari(Mac)，O9(Mac)，IE5(Mac)，IE6(PC)，FF(PC)上进行了测试，它们都可以工作。之所以使用'if'语句，是因为某些浏览器使用cssRules ...有些仅使用规则...而唯一的缺点是您不能使用“ background-color”来指代样式，删除连字符并大写连字符后的第一个字母。

要引用第一个CSS规则，请使用“ changeRule(0)”，第二个“ changeRule(1)”和第三个“ changeRule(2)”，依此类推...

我还没有找到无法在其上运行的浏览器。。。。。。。。。。。。。。。。。一遍一遍又一遍。

BillyBones 2011.01.20，11:57 AM — [在桶中]帖子：1加入日期：2011.01.20

您好，我在这些论坛中注册只是为了添加这一点，因为我无法在其他地方方便地找到它：

function changeStyle(selectorText)

{

var theRules = new Array();

if (document.styleSheets[0].cssRules) {

theRules = document.styleSheets[0].cssRules;

}

else if (document.styleSheets[0].rules) {

theRules = document.styleSheets[0].rules;

}

for (n in theRules)

{

if (theRules[n].selectorText == selectorText)   {

theRules[n].style.color = 'blue';

}

}

}

这只是使CSS规则可以通过选择器名称而不是cssRules数组中的索引号来识别。

换句话说，您可以使用字符串参数“ selectorText”来执行Javascript函数，而不是难以记住的数字(如果添加了新样式，则该数字容易频繁更改)。

谢谢您为Flip进行的10到12个小时的研究，希望我能做一个有价值的补充。