CSS: 预期的颜色，得到 NaNrgb

Question

我想在 Bootstrap 表单中有一个复选框，我希望它在选中时变为绿色。这是我的代码：

function test() {
  $("#check1").animate({
    "background-color": "rgb(209, 231, 221)"
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">


<div class="input-group mb-3">
  <span class="input-group-text"><input type="checkbox" onclick="test()" id="checkbox"></span>
  <input type="text" id="check1" class="form-control" placeholder="This is a checkbox">
</div>

不过，在执行此操作时，我在控制台中收到一条错误消息，指出需要一种颜色，但它却收到了 NaNrgb。
我也用十六进制代码 #d1e7dd 尝试过，但也失败了。

为什么 JavaScript 将其误认为是 NaN 对象？有什么办法可以解决吗？

提前致谢

Answer 1

您需要 jQuery.Color 插件以获得 background-color 支持。

function test() {
  $("#check1").animate({
    "background-color": "rgb(209, 231, 221)"
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">


<div class="input-group mb-3">
  <span class="input-group-text"><input type="checkbox" onclick="test()" id="checkbox"></span>
  <input type="text" id="check1" class="form-control" placeholder="This is a checkbox">
</div>

Answer 2

您可以编辑您的 javascript

<script type="text/javascript">
      let checkbox = document.querySelector('#check1');
      checkbox.addEventListener('click', () => {
        checkbox.classList.add('/*Some class you want to add*/')
        // or 
        checkbox.style = '/*Some styling you want*/'
      });    
    </script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">


<div class="input-group mb-3">
  <span class="input-group-text"><input type="checkbox" id="checkbox"></span>
  <input type="text" id="check1" class="form-control" placeholder="This is a checkbox">
</div>
    <input class="form-check-input danger" type="checkbox" value="" id="flexCheckDefault">

并且请不要使用onclick使用事件监听器更好谢谢

CSS: 预期的颜色，得到 NaNrgb

CSS: Expected color, got NaNrgb

html

javascript

css

jquery

bootstrap-5