如何用JavaScript修改CSS圆锥渐变值

Question

我有以下复制饼图的 HTML 结构：

$('#clickthis').click(function(e){
    e.preventDefault();
  $('.circle-chart').css('background: conic-gradient(green 0% 60%, grey 60% 100%)')
});

.circle-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(green 0% 30%, grey 30% 100%);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*.circle-segment {
  width: 0%;
  height: 0%;
  background-color: grey;
  border-radius: 50%;
}*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="circle-chart">
  <!--<div class="circle-segment"></div>-->
</div>
<button id="clickthis">
Click Me
</button>

conic-gradient 中的百分比值来自 JS 变量。因此，如果该值为 30%，则：

background: conic-gradient(green 0% 30%, grey 30% 100%);

但如果该值为 60%，则应该是：

background: conic-gradient(green 0% 60%, grey 60% 100%);

如何使用JS更新二次曲线梯度值？我尝试过的 JS 没有执行任何操作，也没有给出任何错误。

Answer 1

你犯了一个小错误，

$('.circle-chart').css('背景：圆锥形渐变(绿色 0% 60%, 灰色 60% 100%)')

应该是（检查下面我们需要如何应用属性值）

$('.circle-chart').css('背景', '圆锥形渐变(绿色 0% 10%, 灰色 30% 100%)')