gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 07:13:10 25 4
gpt4 key购买 nike

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

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

我在这个 block 中调用 Angular 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.element(document).ready(.... 无法完成这项工作,但来自以下链接的纯 JS 方法 - 完成了。

https://github.com/jfriend00/docReady

我将用于检查某些条件并将颜色分配给条形图的 JS block 封装到 docReady block 中。请参阅下面的简化代码示例。

           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

关于javascript - 如何从 JS 更改动态 CSS 类的 bg 颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50978709/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com