我可以使用 JQuery 更改使用 CSS 径向渐变创建的图案的颜色吗？答案

【问题标题】：Can I use JQuery to change the colour of a pattern created with CSS radial gradient?我可以使用 JQuery 更改使用 CSS 径向渐变创建的图案的颜色吗？
【发布时间】：2018-04-13 19:14:42
【问题描述】：

我正在使用以下 CSS 来创建虚线背景：

body {
 background: radial-gradient(
    circle,
    green,
    green 20%,
    #000 0%, 
    #000
  );
  background-size: 10px 10px;
}

我可以使用 JQuery 更改图案中点的颜色吗？ Codepen 链接：https://codepen.io/forTheLoveOfCode/pen/LOppaL?editors=1111

目前我的 JQuery 如下（更改为线性渐变 - 我设法找到了）：

 $(document).ready(function() {
  $("#changeDots").on("click", function() {
       $("body").css({background: "-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000))"});
  });
 });

【问题讨论】：

您不能在点击时添加一个类并让该类具有新颜色吗？

标签： jquery html css

【解决方案1】：

一种方法是在文档头部写一个<style>标签，然后点击，在那里写你的CSS，例如

$(document).ready(function() {

 $('head').append('<style type="text/css" id="myStyle"/>');

 $("#changeDots").on("click", function() {
  var newStyle = 'body {' +
   'background: radial-gradient(' +
    'circle,' +
      'red,' +
      'red 20%,' +
      '#000 0%,' + 
      '#000' +
    ');' +
    'background-size: 10px 10px;' +
  '}';

  $('#myStyle').html(newStyle);
 });
});

（如果 newStyle 变量不是动态的，则显然将它移到 click 事件之外，您不需要一遍又一遍地重新声明它。

Codepen example

【讨论】：

【解决方案2】：

径向渐变在 jQuery 中很难改变，因为渲染的可能性是无限的。此外，浏览器前缀可能很难管理。

由于radial-gradient 是分配给background-image 的值，您可以将它与background-color 结合使用。所以让你的渐变从transparent 到black，然后你可以很容易地改变background-color 属性：

 $(document).ready(function() {
  $("#changeDots").on("click", function() {
       $("body").css({backgroundColor: "red"});
  });
 });

body {
 background: radial-gradient(
    circle,
    transparent,
    transparent 20%,
    #000 0%, 
    #000
  );
  background-size: 10px 10px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class = "row text-center">
    <div class = "col-xs-12">
      <br/>
      <button id = "changeDots" class = "btn btn-primary">
        Change the colour of green dots
      </button>
    </div>
  </div>
</div>

【讨论】：

向 body 添加一个额外的类来添加不同的行为怎么样。你怎么看？然后将样式保留在 CSS 文件中，而不是 JS 部分中。
@Roy 我会这样做，但这不是问题。
@Karl-AndréGagnon 它非常聪明。如果不出意外，我了解径向渐变如何更好地工作。谢谢。
@Karl-AndréGagnon 你让我很开心，请参阅上面的最终项目链接。使用一组 css 类会更长。
@KatiaPunter 很高兴听到这个消息。祝你接下来好运！

【解决方案3】：

只需在点击事件中将“body”更改为 document.body，如上面的快照所示。我试过了，这是锻炼：

$(document).ready(function() {$("#changeDots").on("click", function() { $(document.body).addClass("purpleDots");});});

谢谢！！！

【讨论】：

抱歉，已经编辑了我的 codepen，已经完成了。不过，我想遍历一系列颜色。我会尝试使用@Karl-AndréGagnon 的 udea 来做到这一点