javascript - 使用 Javascript 选择在 CSS 中声明的颜色

Question

我正在使用 highcharts创建圆环图。每个部分的颜色在通过 JS 传递的选项中定义。

   self.chartView = new Donut({
      el: this,
      colors: ['#96c6e3','#d8c395','#7fb299','#c693c3'],
      data: $(this).data('series')
    });

我想在 CSS 中定义这些颜色，然后将它们抓取用于圆环图。类似的东西:

CSS

#color1{
    background-color: #96c6e3;
}

JS

    self.chartView = new Donut({
      el: this,
      colors: [$('#color1').css('background-color') ],
      data: $(this).data('series')
    });

但我什至不确定这是否可能。

Answer 1

例如，请看这段代码:

$(function() {
  var colors = [
    $('#color1').css('background-color'),
    $('#color2').css('background-color')
  ];

  $('#container').highcharts({
    colors: colors,
    series: [{
      type: 'pie',
      name: 'Browser share',
      data: [
        ['Firefox', 45.0],
        ['IE', 26.8]
      ]
    }]
  });
});

#color1 {
  background-color: #96c6e3;
}

#color2 {
  background-color: red;
}

#colors {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="colors">
  <div id="color1"></div>
  <div id="color2"></div>
</div>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>