代码之家 › 专栏 › 技术社区 › user2217057

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

dynamic css html javascript

user2217057 · 技术社区 · 6 年前

我有一个条形图,我希望能够根据条件为条形图指定单独的填充颜色。我不认为这很重要,但我用角型nvd3线加柱状图来绘制条形图。

更新我的本地环境似乎有问题,可能是NVD3或Angular库,我还不确定到底发生了什么。我把琴放在一起,一切都很好。请参见下面的链接,条形图可以有不同的颜色。但是,在我的本地计算机上,当执行达到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

我把这个块中角控制器内的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 回复 | 直到 6 年前

user2217057 6 年前

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

我在浏览器中的最终输出是合并多个HTML/JS/CSS片段的结果。问题出在时间上:JS代码试图引用一个标记,但在JS引用时,该标记的HTML/CSS动态构造似乎不完整。

角元素(文档)。就绪(……无法完成该作业,但下面链接中的纯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";
         });

适用于所有主要浏览器:火狐、Chrome、Safari和IE