如何从 JS 更改动态 CSS 类的 bg 颜色答案

【问题标题】：How to change bg color of dynamic CSS class from JS如何从 JS 更改动态 CSS 类的 bg 颜色
【发布时间】：2018-12-01 09:17:04
【问题描述】：

我有一个条形图，我希望能够根据条件为条形分配单独的填充颜色。我认为这并不重要，但我正在使用 angular-nvd3 linePlusBarChart 来绘制条形图。

更新我的本地环境似乎存在问题，可能与 NVD3 或角度库有关，我不确定发生了什么。我把jsfiddle放在一起，一切都很完美。请参阅下面的链接，条形可以有不同的颜色。但是，在我的本地计算机上，当执行到达点 var y = document.querySelector(....，我在控制台中遇到角度错误 ->>>> y 为空。

http://jsfiddle.net/p0g9Lqu8/

这是 HTML。

<nvd3>
<g class="nv-bars">
    <rect x="0" y="419" height="1"  fill="LimeGreen" class="nv-bar positive nv-bar-0-0" width="267"></rect>
    <rect x="0" y="252" height="168"  fill="LimeGreen" class="nv-bar positive nv-bar-0-1" width="267"></rect>
    <rect x="0" y="294" height="126"  fill="LimeGreen" class="nv-bar positive nv-bar-0-2 hover" width="267"></rect>
    <rect x="0" y="252" height="168"  fill="LimeGreen" class="nv-bar positive nv-bar-0-3" width="267"></rect>
</g>
</nvd3>

如您所见，每个 rect 标记都有一个动态 CSS 类 nv-bar-0-1、nv-bar-0-2.. 我希望能够从 JS 中指向它们。注意：从 HTML，如果我使用 CSS，一切正常，但从 JS 循环，则不行。任何帮助表示赞赏。

这非常有效。

<style>
nvd3 .nv-bars rect {
    fill:white;
}

nvd3 .nv-bars rect.nv-bar-0-1{
    fill:yellow;
}
  </style>

但是这不是：

for(var i = 0; i < 4; i++) {
     var y = document.querySelector('nvd3 .nv-bars rect.nv-bar-0-' + i); 
     y.style.fill = "#ffff00";
}

或者这个，同样的结果

var y = document.querySelector('nvd3 .nv-bars rect.nv-bar-0-1); // y is always null
y.style.fill = "#ffff00"; // triggers null reference error here

我在这个块中调用 Angular 控制器中的那个 JS 片段：

     angular.element(document).ready(function () {
        var y = document.querySelector('nvd3 .nv-bars rect.nv-bar-0-1');
        console.log('>>>>>>>>>>>===' + y); // this outputs [object    HTMLUnknownElement]
        y.style.fill = "#ffff00";
    });

【问题讨论】：

.nvd3 - 不应该是nvd3吗？ - <nvd3> 是一个 ELEMENT，而不是一个类 - 所以 ... var y = document.querySelector('nvd3 .nv-bars rect.nv-bar-0-' + i); 是你想要做的
把document.querySelector('.nvd3 .nv-bars rect.nv-bar-0-1');改成document.querySelector('nvd3 .nv-bars rect.nv-bar-0-1');
真的吗？所以，它根本不需要@MuhammadOmerAslam 的结束语吗？ :D
大声笑@JaromandaX 是复制粘贴没有注意到，只是更新了它。对此感到抱歉。
sorry，nvd3之前的那一点是多余的，我的帖子里应该是nvd3

标签： javascript html css dynamic

【解决方案1】：

感谢大家的时间和投入。我终于找到了问题所在以及解决方案，所以我想与社区分享，以防有人遇到类似问题。

我在浏览器中的最终输出是组合多个 HTML/JS/CSS 片段的结果。问题出在时机上：JS 代码试图引用一个标签，但在 JS 引用时，该标签及其 HTML/CSS 的动态构造似乎尚未完成。

angular.element(document).ready(.... 无法完成这项工作，但来自下面链接的纯 JS 方法 - 做到了。

https://github.com/jfriend00/docReady

我将用于检查某些条件并为条形分配颜色的 JS 块包含在 docReady 块中。请参阅下面的简化代码示例。

           docReady(function () {

                for (var i = 0; i < 4; i++) {
                    var k = document.querySelector('nvd3 .nv-bars rect.nv-bar-0-' + i);
                    // some condition goes here.....
                    k.style.fill = "green";

                }

                var y = document.querySelector('nvd3 .nv-bars rect.nv-bar-0-1');
                // this too changes color
                y.style.fill = "#ff0000";
         });

适用于所有主流浏览器：Firefox、Chrome、Safari 和 IE

【讨论】：