javascript - 如何替换 css 类内容？

Question

我有一个代码，其中有一个充满正方形的地方，里面有一个每秒移动的彩色正方形，这个正方形有一个 CSS 类来表示它的颜色，所以它并没有真正移动，只是向 <span> 添加了一个新类。并在一秒钟后将其删除。

我有一个函数，我想改变正方形的颜色，它会像这样工作: changeColor({R:50,G:200,B:50,A:1})

我一直在努力让它工作，但我遇到了这个问题:

• 因为我有添加和删除方形颜色类的功能，所以我无法更改 CSS 类名称，它必须相同，否则应用程序将无法运行。

• 如果我使用 .css("background", "rgba(" + R + "," + G + "," + B + "," + A + ")");它在当前 <span> 中添加颜色永远。

• 我无法拥有 .attr()工作，也许我做得不正确。

我试过使用 .css , .removeClass , .addClass , 和 .attr

都没有用，可能我没有正确使用它。

function changeColor(sqColor) {

    R = sqColor.R;
    G = sqColor.G;
    B = sqColor.B;
    A = sqColor.A;

    $($("#container .sq_bullet a.sq_current > span")[0]).css("background", "rgba(" + R + "," + G + "," + B + "," + A + ")");

}

(这是 a.sq_current，因为“跨度”在“a”内)

完整代码太长发不上来，不好意思，当真一大堆<span>里面什么都没有，只有 css 属性。

所以目标是更改 CSS 类:

#container .sq_bullet a.sq_current > span {
    background: rgba(255,106,0,1);
}  

无论我在函数中输入什么，例如:changeColor({R:50,G:200,B:50,A:0.8})

Answer 1

您可以通过将内联元素写入 header 然后动态地将样式附加到它来实现这一点。然后，您可以在跨度上添加/删除类并独立更新元素中的样式，而无需向跨度编写任何内联样式。

这是一个例子(这可以进一步改进，我只是重用了我之前的例子并对其进行了调整以证明我的意思):

var element = $("#container .sq_bullet a.sq_current > span").eq(0);

function changeColor(sqColor) {
  R = sqColor.R;
  G = sqColor.G;
  B = sqColor.B;
  A = sqColor.A;
  
  if (!$('myStyles').length) {
    $('head').append('<style id="myStyles" type="text/css"></style>');
  }
  var newStyle = ".myClass { background: rgba(" + R + "," + G + "," + B + "," + A + ");}";
  $('#myStyles').html(newStyle);
}

element.addClass('myClass');
changeColor({R:50,G:200,B:50,A:0.8});

setTimeout(function() {
  element.removeClass('myClass');
}, 2000);

setTimeout(function() {
  element.addClass('myClass');
  changeColor({R:200,G:50,B:50,A:0.8});
}, 4000);

.myClass {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div class="sq_bullet">
    <a class="sq_current">
      <span>Span</span>
      <span>Span</span>
      <span>Span</span>
    </a>
  </div>
</div>

请注意，此示例创建了一个内联样式 block ，其 .myClass 背景设置为绿色。然后它将类添加到跨度中，两秒后删除类，然后两秒后将背景颜色更改为红色并再次添加类 - 所有这些都没有在跨度本身上写入任何内联样式。