如何替换CSS类内容？

TraaZ 发表于 Dev

TraaZ

我有一个代码，那里到处都是正方形，里面有一个彩色的正方形，每秒移动一次，这个正方形有一个CSS类，因为它是彩色的，所以它并没有真正移动，只是在a上添加了一个新类<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，因为“ span”位于“ 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})

勾画

您可以通过将内联元素写入标头，然后向其动态添加样式来实现。然后，您可以在跨度上添加/删除类，并独立更新元素中的样式，而不必向跨度写入任何内联样式。

这是一个示例（可以做很多改进，我只是重复使用了上一个示例，并对其进行了调整以演示我的意思）：

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>

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。