我可以使用JQuery来更改使用CSS径向渐变创建的模式的颜色吗？

Question

我使用以下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))"});
  });
 });

Answer 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

Answer 2

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

由于radial-gradient是分配给background-image的值，因此您可以将其与background-color结合使用。从transparent到black制作渐变，然后就可以轻松更改background-color属性：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需改变身体＆＃39;单击事件中的document.body，如上面的快照所示。我试过，它的锻炼：

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

谢谢!!!