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

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

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

例如，supose a我有以下课程：

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

.菜单{字体大小：12px；}

我想要的是，在运行时更改

菜单

类的

字体大小

规则，这样页面中使用该类的每个元素都会受到影响

---

另外，我还想知道如何删除

。菜单
类定义。
我想您正在查找以下内容：


这允许您使用javascript更改实际规则。我曾经使用过它，几年前它似乎很有效。
在运行时更改CSS规则并不困难，但显然很难找到您想要的规则。PPK有一个关于这个的快速浏览

您需要使用
document.styleSheets[i].cssRules
，这是一个需要解析以找到所需的数组，然后使用
rule.style.setProperty（'font-size'，'10px'，null）
我在上找到了答案，我在这里逐字复制了部分线索，因为我担心线索和非常有用的答案会消失

Flip 2006.06.2602:45-
[松脆的青蛙]
职位：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>

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

换句话说，您可以使用字符串参数“selectorText”来执行Javascript函数，而不是一个难以记住且在添加新样式时容易频繁更改的数字

感谢您10到12个小时的研究，Flip，我希望我做了一个有价值的补充。
很难找到您想要的规则，因为您必须遍历文档.styleSheets[I].cssRules数组。（并将类名与selectorText属性进行比较）
所以我解决这个问题的方法是添加一个新的CSS类，从HTML元素中删除旧的CSS类，然后添加这个类而不是它


var length=getCssRuleLength（）；
var newClassName=“css类名”+长度；
//从html元素中删除预览css类。
$（“#您的html元素”）.removeClass（“css类名”）；
$（“#您的html元素”）.removeClass（“css类名”+（长度-1））；
$（“#您的html元素”）.addClass（newClassName）；
//插入一个css类
insertcsrule（“.”+newClassName+”{最大宽度：100px；}'，长度）；
函数getCssRuleLength（）{
变量长度=0；
if（document.styleSheets[1].cssRules）{
length=document.styleSheets[1].cssRules.length；
}else if（document.styleSheets[1].rules）{//ie
length=document.styleSheets[1].rules.length；
}
返回长度；
}
函数insertcsrule（规则、索引）{
if（document.styleSheets[1].cssRules）{
document.styleSheets[1].insertRule（规则，索引）；
}else if（document.styleSheets[1].rules）{//ie
document.styleSheets[1].addRule（规则，索引）；
}
}
我为任何想这样做的人提供了一个简单的帮助函数：

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';

请看下面的示例：


函数getCSSRule（搜索）{
return[].map.call（document.styleSheets，函数（项）{
返回[].slice.call（item.cssRules）；
}).减少（功能a、b）{
返回b.concat（a）；
}).过滤器（功能（规则）{
返回rule.selectorText.lastIndexOf（search）==rule.selectorText.length-search.length；
})[0];
}
document.querySelector（'button'）。addEventListener（'click'，函数（e）{
getCSSRule（'.iframe'）.style.backgroundColor='orange'；
});
.iframe{
高度：200px；
宽度：200px；
显示：内联块；
边框：1px实心#000；
}

更改.iframe背景色

为了便于使用和跨浏览器兼容性，我在这里选择了最好的答案，并将它们结合起来。此外，我还介绍了当页面上没有样式表或css规则还不存在时抛出错误的情况

以下是一种适用于任何给定规则选择器和规则更改功能的方法：

// general function for selecting rules and applying changes
function change_css_rules(changeRuleFunc, selectorFunc) {
    [].concat.apply([], // flattens arrays
        Array.from(document.styleSheets).map(function(sheet) { // each ss
            return Array.from(sheet.cssRules).filter(function(rule) { // each rule
                return selectorFunc(rule); // only select desired rules
            });
        })
    ).map(changeRuleFunc); // change the selected rules
}

示例用法：

var my_changeRuleFunc = function(rule) {
    rule.style.fontSize = '20px';
}

var my_selectorFunc = function(rule) {
    return rule.selectorText == '.myClass'; // return true to select this rule
}

change_css_rules(my_changeRuleFunc, my_selectorFunc); // apply change to selected rules

这里有一个让人难堪的简单技巧，我一直在使用它来动态操作CSS类规则，它可以避免复杂的问题（如通过规则解析来定位所需的规则，正如预期的答案所指出的），甚至可以免费提供一些额外的灵活性

（旁注：上一次添加此答案的尝试在几秒钟内就被本页为数不多的自动通知目标之一在没有反馈的情况下否决了。我不确定短的下意识反应时间是否足以理解为什么这是一个可靠的解决方案，很好地涵盖了OP的用例，尽管如此，我还是重新表述了我的想法。）t、 猜测叙述可能是某种原因。或者缺少分号（我现在为他添加了分号）。或者缺少不必要的花括号（也添加了）。或者缺少关于非效果的注释（添加了）。或者没有使用足够复杂的方法（无法修复，甚至还简化了代码）.我相信他会匿名再次攻击，但仍然会重试，因为这是一种干净而健壮的技术，值得使用。）

注意：这种方法假设您对页面的样式有足够的控制，以确保相同的类规则不会由不同的方法创建。（并且它希望
HEAD
元素存在。）

（这种方法的一个潜在成本可能是在
innerHtml
上重新渲染，但由于我们正在改变CSS，重新绘制迫在眉睫。此外，
innerHtml
是对未显示的元素进行的，因此浏览器可以对其进行优化，即使它不重要。）

好的。由于您可以选择任意数量的
样式
元素，因此
var my_changeRuleFunc = function(rule) {
    rule.style.fontSize = '20px';
}

var my_selectorFunc = function(rule) {
    return rule.selectorText == '.myClass'; // return true to select this rule
}

change_css_rules(my_changeRuleFunc, my_selectorFunc); // apply change to selected rules

function replace_class(classname, block) {
    // Remove old:
    var s = document.head.querySelector("style." + classname);
    if (s) { document.head.removeChild(s); }

    // Just delete?
    if (!block) { return; }

    // Add new:
    s = document.createElement("style");
    s.className = classname;
    s.innerHTML = ("." + classname + block); // <style class="classname">.classname{...}</style>
    document.head.appendChild(s);
}