javascript - 将不同的 CSS 规则添加到一组生成的元素中

Question

我想循环并将多个彩色跨度添加到一个 div 容器中。为了有效地做到这一点，我只需更改 css ，而不是向元素添加新的颜色类:

      var colorEn =  ["RoyalBlue", "LawnGreen", "red", "orange", "yellow", "black", "white", "MediumOrchid"];
      for ( i = 0; i < colorEn.length; i++ ) {
            var $span = $('<span />').attr('class', 'coloratorSquare');     
               $span.css({background : colorEn[i]});
               $("#colorator").append($span);
      } 

生成，例如:

<span class="coloratorSquare active" style="background: rgb(65, 105, 225);"></span>

然后，当我选择(单击)某个跨度时，它会将颜色更改为银色以表明它已被选中，并将所有其他同级跨度设置回其原始颜色。这是一个片段:

        $(this).addClass("active").siblings().removeClass("active");

问题是，如果我改变 css跨度元素( $span.css(...) )，它不应用 CSS添加/删除类的更改。但是，如果我注释掉更改跨度的 css，则不会添加多种颜色，而是添加 active所选/取消选择范围的类添加/删除会按预期更改颜色:

// $span.css({background : colorEn[i]});

CSS:

        .active {
            background-color: Silver;
            color: black;
        }

我根本不会改变 .css一个跨度，但不要认为在生成过程中向每个跨度添加类是没有意义的，并且必须添加 CSS每种颜色的类规则复制 .css功能。

我的问题:如何将多个不同的 css 规则(例如:多色)添加到随机生成的元素，而无需 a) 必须在 CSS 文件中手动生成所有这些规则，以及 b) 改变.css使用 jQuery 这样它会导致添加/删除 CSS 类规则的问题。

抱歉，如果不清楚。

谢谢!

Answer 1

您可以在银色上使用!important 让它覆盖元素的本地设置属性，但这种技术不受欢迎。

我的建议是考虑具体情况；如果这不是一次性代码，那么在元素上设置类而不是直接操作它们的样式属性通常更有意义。如果它是您需要的模型，那么请务必在其上点击 !important 并继续。