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

Question

我知道可以通过JavaScript在运行时添加新的CSS类定义.但...

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

例如,我有一个以下类:

<style>
.menu { font-size: 12px; }
</style>

我想要的是,在运行时,更改类的font-size规则.menu,以便页面中使用此类的每个元素都会受到影响.

而且,我也想知道如何删除.menu类定义.

Answer 1

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

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

Answer 2

我在http://twelvestone.com/forum_thread/view/31411找到了答案,我在这里逐字逐句地复制了部分内容,因为我担心这个帖子和非常有用的答案会消失.

翻转2006.06.26,02:45 PM - [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 ...有些只使用规则...而唯一的另一个头发就是你不能用"background-color"来引用样式,你有摆脱连字符并将连字符后的第一个字母大写.

要引用您使用"changeRule(0)"的第一个CSS规则,第二个"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函数,而不是难以记住的数字,并且如果添加了新样式,则容易频繁更改.

感谢您10至12小时的研究,翻转,我希望我做了一个值得的补充.

Answer 3

我想你正在寻找这个:

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

这允许您使用javascript更改实际规则.香港专业教育学院曾经使用过它,几年前它似乎已经奏效了.

Answer 4

我已经为想要这样做的人做了一个简单的帮助函数:

function getCSSRule(search) {
  return [].map.call(document.styleSheets, function(item) {
    return [].slice.call(item.cssRules);
  }).reduce(function(a, b) {
    return b.concat(a);
  }).filter(function(rule) {
    return rule.selectorText.lastIndexOf(search) === rule.selectorText.length - search.length;
  })[0];
}

然后,您可以像这样使用它:

getCSSRule('.mydiv').style.fontSize = '20px';

看看下面的例子:

function getCSSRule(search) {
  return [].map.call(document.styleSheets, function(item) {
    return [].slice.call(item.cssRules);
  }).reduce(function(a, b) {
    return b.concat(a);
  }).filter(function(rule) {
    return rule.selectorText.lastIndexOf(search) === rule.selectorText.length - search.length;
  })[0];
}

document.querySelector('button').addEventListener('click', function(e) {
  getCSSRule('.iframe').style.backgroundColor = 'orange';
});

.iframe {
  height: 200px;
  width: 200px;
  display: inline-block;
  border: 1px solid #000;
}

<p>
  <button>Change .iframe background-color</button>
</p>
<div class="iframe"></div>
<div class="iframe"></div>