jQuery动态背景色更改迫使包含该类的元素采用“内联”样式

Question

伙计们，

所以...这是一个奇怪的问题。 目标是使用颜色选择器动态设置类的背景色 ，其中某些“ div”元素可能包含也可能不包含该类。

以下代码“种类”有效，但是，包含类的元素（正在更改背景色）由于某种原因通过“内联样式”更改了背景色。 （这使整个事情不起作用）我已经尝试过！重要的和其他一些事情，但收效甚微。 有任何想法吗？

注意： .secondaryB是有问题的类。

$('#colorSelector4').ColorPicker({

    onChange: function (hsb, hex, rgb) {
        $('#colorSelector4 div').css('background-color', '#' + hex);
        $('.secondaryColor').css('color', '#' + hex);
        $('.secondaryColorB').css('background-color', '');
        $('.secondaryColorB').css('background-color', '#' + hex);
    }

});

注意：以下是Chrome控制台中包含“ .secondaryB”的元素所发生的事情。

Answer 1

因为您直接将样式应用于元素，所以您在这些元素上使用了style属性，这只能转换为嵌入式样式。 但是，有一些方法可以动态创建样式表，如此处所述 。

给定对样式表的引用（例如，来自document.styleSheets数组），以及对要更改的特定规则的引用（通过stylesheet.cssRules数组），则可以设置其style属性，它将修改样式表本身，而不是内联样式。 例：

// Assuming that the rule you want is the first rule of the first stylesheet of the page
document.styleSheets[0].cssRules[0].style.backgroundColor = 'blue';