如何从JS更改动态CSS类的bg颜色
我有一个条形图，我希望能够根据条件为条形图分配单独的填充颜色。我认为这无关紧要，但我正在使用angular-nvd3 linePlusBarChart来绘制条形图。
更新我的本地环境似乎有问题，可能是NVD3或angular库，我还不确定是怎么回事。我把jsfiddle放在一起，一切都运行得很好。请看下面的链接，这些条可以有不同的颜色。然而，在我的本地计算机上，当执行到达点var y=document.querySelector(...)时，我在控制台->>>>> y is null中得到角度错误。
这是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";
});回答 1
Stack Overflow用户
发布于 2018-06-25 05:34:27
我感谢大家的时间和投入。我终于找到了问题所在，解决方案是什么，所以我想与社区分享它，以防任何人遇到类似的问题。
我在浏览器中的最终输出是组合多个HTML/JS/CSS片段的结果。问题出在时间上: JS代码试图引用标记，但在JS引用时，该标记及其HTML/CSS的动态构造似乎并未完成。
Angular.element(文档).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
https://stackoverflow.com/questions/50978709
复制相似问题