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

Question

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

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

我可以使用 JQuery 更改图案中圆点的颜色吗？代码笔链接: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 变量移到点击事件之外，您不需要一遍又一遍地重新声明它)。

Codepen example