Javascript 如何从JS更改动态CSS类的bg颜色
我有一个条形图,我希望能够根据条件为条形图指定单独的填充颜色。我不认为这有什么关系,但我正在使用angular-nvd3 linePlusBarChart绘制条形图 更新 我的本地环境似乎有问题,可能是NVD3或angular库,我还不确定发生了什么。我把JSFIDLE放在一起,一切都很顺利。请参见下面的链接,这些条可以有不同的颜色。 但是,在我的本地计算机上,当执行到达var y=document.querySelector…点时,我在控制台中得到角度错误->>>>y为null 这是HTMLJavascript 如何从JS更改动态CSS类的bg颜色,javascript,html,css,dynamic,Javascript,Html,Css,Dynamic,我有一个条形图,我希望能够根据条件为条形图指定单独的填充颜色。我不认为这有什么关系,但我正在使用angular-nvd3 linePlusBarChart绘制条形图 更新 我的本地环境似乎有问题,可能是NVD3或angular库,我还不确定发生了什么。我把JSFIDLE放在一起,一切都很顺利。请参见下面的链接,这些条可以有不同的颜色。 但是,在我的本地计算机上,当执行到达var y=document.querySelector…点时,我在控制台中得到角度错误->>>>y为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>
我将此块中Angle controller内的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";
});
我感谢大家的时间和投入。我终于找到了问题所在以及解决方案,因此我想与社区分享,以防任何人遇到类似问题 我在浏览器中的最终输出是组合多个HTML/JS/CSS片段的结果。问题出在时间上:JS代码试图引用一个标记,但在JS引用时,该标记及其HTML/CSS的动态构造似乎还没有完成 angular.elementdocument.ready。。。。无法完成这项工作,但是下面链接中的纯JS方法完成了 我将用于检查某些条件并为条指定颜色的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是一个元素,不是一个类-所以。。。变量y=document.querySelector'nvd3.nv bars rect.nv-bar-0-'+i;是您要更改的文档。querySelector“.nvd3.nv bars rect.nv-bar-0-1”;记录.querySelector'nvd3.nv-bar-rect.nv-bar-0-1';真正地所以,它根本不需要一句结束语@MuhammadOmerAslam?:Dlol@JaromandaX是复制粘贴,没有注意到,只是更新了它。对不起,在nvd3之前的那一点是额外的,我的帖子中应该是nvd3
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.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";
});
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";
});