如何用jQuery修改cur_font类关联选择器的font-family属性为Arial？

你的代码没生效主要有两个原因：

1. 原<style>标签没有添加cur_font类，导致$("style.cur_font")找不到目标元素
2. jQuery的.css()方法是给DOM元素添加行内样式，没法直接修改样式表中的规则

下面给你两种可行的解决方案：

方案一：直接修改目标元素的行内样式 #

这种方法简单直接，直接选中.cur_font下的所有目标元素，修改它们的字体：

<style>
.cur_font html,body,h2,h1,div,td { font-family:'tahoma'; }
</style>

<script>
$(".change_font").on("click", function (e) {
    var font = 'arial';
    // 精准选中所有需要修改的目标元素
    $(".cur_font html, .cur_font body, .cur_font h1, .cur_font h2, .cur_font div, .cur_font td")
        .css("font-family", font);
});
</script>

方案二：修改样式表中的规则 #

如果需要保持样式表的规则统一（而不是给每个元素加行内样式），可以通过操作浏览器的样式表对象来修改：

<style>
.cur_font html,body,h2,h1,div,td { font-family:'tahoma'; }
</style>

<script>
$(".change_font").on("click", function (e) {
    var font = 'arial';
    // 遍历所有样式表
    for (let i = 0; i < document.styleSheets.length; i++) {
        const sheet = document.styleSheets[i];
        const rules = sheet.cssRules || sheet.rules; // 兼容IE和标准浏览器
        // 遍历当前样式表的所有规则
        for (let j = 0; j < rules.length; j++) {
            const rule = rules[j];
            // 匹配到目标选择器规则时修改字体
            if (rule.selectorText === ".cur_font html,body,h2,h1,div,td") {
                rule.style.fontFamily = font;
                break;
            }
        }
    }
});
</script>

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