如何使用jQuery修改div.box.open的CSS类定义？

问题背景 #

现有CSS代码：

div.box { color:black; }
div.box.open { background:red; }

现有HTML代码：

<div class="box">text...</div>

需求：使用jQuery修改div.box.open的CSS类定义，将其背景色从red改为orange，而非直接修改元素的内联样式。当前使用$("div.box.open").css("background", "orange")仅能修改元素的内联样式，无法更改类定义，需实现修改类规则的方法。

解决方案 #

方法1：动态插入优先级覆盖的样式规则（推荐） #

最简单可靠的方式是在页面<head>中插入新的<style>标签，通过优先级覆盖原有类样式。这种方式兼容性好，无需遍历样式表：

// 向head中插入新的style规则，覆盖原类样式
$('head').append('<style>div.box.open { background: orange; }</style>');

如果原有样式存在更高优先级的规则（比如带!important），可以在新规则中添加!important确保生效：

$('head').append('<style>div.box.open { background: orange !important; }</style>');

这样所有带有box.open类的元素都会自动应用新的背景色，无需逐个修改元素。

方法2：直接修改现有样式表的规则 #

如果需要直接修改原样式表中的类定义，而非添加新规则，可以遍历页面的样式表找到目标规则并修改：

// 遍历页面所有样式表
$.each(document.styleSheets, function(i, sheet) {
    // 遍历当前样式表的所有规则（兼容不同浏览器的属性名）
    var rules = sheet.cssRules || sheet.rules;
    $.each(rules, function(j, rule) {
        // 匹配目标选择器
        if (rule.selectorText === 'div.box.open') {
            // 修改背景色属性
            rule.style.background = 'orange';
            return false; // 找到目标后终止遍历
        }
    });
});

注意：这种方法存在局限性——如果样式表是跨域加载的，浏览器会因安全限制禁止修改；同时不同浏览器对样式表规则的访问属性（cssRules/rules）有差异，需要兼容处理。

内容的提问来源于stack exchange，提问作者user13977214