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

Question

I have a bar chart and I want to be able to assign individual fill colors to bars depending on a condition. I don't think it matters, but I am using angular-nvd3 linePlusBarChart to draw bars.

UPDATE There seemingly is an issue with my local environment, possibly with NVD3 or angular libraries, I am not sure what's going on yet. I put together jsfiddle and everything worked perfectly. See the link below, the bars can have different colors. On my local computer though, when the execution reaches the point var y = document.querySelector(...., I am getting angular error in console ->>>>> y is null.

http://jsfiddle.net/p0g9Lqu8/

Here is the 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>

As you can see, each rect tag has a dynamic CSS class nv-bar-0-1, nv-bar-0-2.. that I would like to be able to point to from JS. NOTE: from HTML, if I use CSS, all works, but from JS loop, does not. Any help is appreciated.

This perfectly works.

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

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

But this, does not:

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

OR this one, same result

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

I call that JS fragment inside Angular controller in this block:

     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";
    });

Answer 1

I thank everybody for time and input. I finally found where the problem was and what the solution would be, so I would like to share it with the community in case anybody comes across a similar problem.

My final output into the browser is a result of combining multiple HTML/JS/CSS fragments. The issue was in timing: the JS code was attempting to refer to a tag, but it appeared the dynamic construction of that tag with its HTML/CSS was not complete at the time of JS reference.

angular.element(document).ready(.... could not do the job, but a pure JS approach from the link below - did.

https://github.com/jfriend00/docReady

I enclosed the JS block that was to check some conditions and assign colors to bars, into the docReady block. See the simplified code sample below.

           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";
         });

Worked in all major browsers: Firefox, Chrome, Safari and IE