使用JavaScript处理CSS

小编典典

使用JavaScript处理CSS

css

我想使用JavaScript来操纵CSS。首先，它被认为是一个不错的小脚本，可以为我的手风琴菜单尝试不同的颜色，以及来自输入字段的不同背景/标题/内容-/
…背景颜色。

我了解如何使用js获取输入值。

我了解CSS是通过使用操作getElementById()，getElementsByClassName()，getElementsByTag()，和getElementsByName()。

现在，问题是我的CSS看起来像这样：

.accordion li > a {
  /* some css here */
}
.sub-menu li a {
/* some css here */
}
.some-class hover:a {
/* css */
}
.some-other-class > li > a.active {
/* css */
}

如何使用JavaScript更改此类样式的属性？

阅读 299

2020-05-16

共1个答案

小编典典

无法使用JavaScript直接操作某些CSS样式。相反，您可以在样式表本身中更改规则，如下所示：

var changeRule = function(selector, property, value) {
        var styles = document.styleSheets,
            n, sheet, rules, m, done = false;
        selector = selector.toLowerCase();
        for(n = 0; n < styles.length; n++) {
            sheet = styles[n];      
            rules = sheet.cssRules || sheet.rules;
            for(m = 0; m < rules.length; m++) {
                if (rules[m].selectorText.toLowerCase() === selector) {
                    done = true;
                    rules[m].style[property] = value;
                    break;
                }
            }
            if (done) {
                break;
            }
        }
    };
changeRule('div:hover', 'background', '#0f0');

selector必须与现有选择器完全匹配，仅选择器文本之间的空格{会被忽略。

您可以开发代码以查找和更改选择器名称的部分匹配项，或者仅检查特定的样式表而不是全部。实际上，当拥有数十个带有数千条规则的样式表时，它也非常昂贵。

毫无疑问，伪代码无法使用此代码段进行操作。
。

2020-05-16