问如何在运行时更改/删除CSS类定义？

EN

在运行时更改CSS规则并不困难，但显然很难找到您想要的规则。PPK在quirksmode.org上对此进行了快速浏览。

您需要使用document.styleSheets[i].cssRules，这是一个需要解析以找到所需数组的数组，然后使用rule.style.setProperty('font-size','10px',null);

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

Flip 2006.06.26，02:45 02 Crunchy Frog帖子: 2470加入日期: 2003.01.26

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

使用的JS代码如下：

<script language="JavaScript">
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';
}
</script>

我已经在FF(Mac)，Safari(Mac)，O9(Mac)，IE5(Mac)，IE6(PC)，FF(PC)上进行了测试，它们都可以工作。使用'if‘语句的原因是一些浏览器使用cssRules...有些人只是使用规则。唯一不同的是，你不能用“背景颜色”来表示风格，你必须去掉连字符，把连字符后面的第一个字母大写。

要引用第一个CSS规则，您可以使用"changeRule(0)“、第二个"changeRule(1)”和第三个"changeRule(2)“，依此类推……

我还没有找到不能正常工作的浏览器...然而……你说的任何话都会被用来对付你。一遍又一遍。

BillyBones 2011.01.20，11:57 11在桶中发布: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函数，而不是一个很难记住并且在添加新样式时容易频繁更改的数字。

谢谢你10到12个小时的研究，Flip，我希望我做了一个有价值的补充。

我认为你正在寻找这个：

http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript

这使您可以使用javascript更改实际的规则。我曾经用过一次，几年前它似乎起作用了。