为什么我得到这种 (rgb(204, 204, 204) 无重复滚动 0% 0% / 自动填充框边框框) 格式的背景颜色？

Question

我在LI哪里给出了一个background-color: #ccc;，基本上我想在变量中获取背景颜色，现在我rgb(204, 204, 204) none repeat scroll 0% 0% / auto padding-box border-box在变量中获取这种格式，但我想要这种rgb(204, 204, 204)格式，这段代码有什么问题吗？

我尝试过：-

$('.response-box').on('click', '.color-box ul li', function() {
  var colorBoxListBgColor = $(this).css('background');
  console.log(colorBoxListBgColor);
});

.color-box ul li {
  background-color: #ccc;
  color: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="response-box">
  <div class="color-box">
    <ul>
      <li></li>
    </ul>
  </div>
</div>

单击LI以检查控制台中的输出。

回答将不胜感激！

Answer 1

如果您只想要颜色，而不想要背景的其他部分，请使用.css('backgroundColor')代替：.css('background')

$('.response-box').on('click', '.color-box ul li', function() {
  console.log($(this).css('backgroundColor'));
});

.color-box ul li {
  background-color: #ccc;
  color: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="response-box">
  <div class="color-box">
    <ul>
      <li></li>
    </ul>
  </div>
</div>