在js中动态改变颜色答案

【问题标题】：Change colour dynamically in js在js中动态改变颜色
【发布时间】：2021-11-25 18:46:59
【问题描述】：

我有一个 json 文件，我在其中存储我的数据以生成某种图表。我希望能够根据 json 中的属性有条件地更改图表的颜色。为假时颜色应为红色，为真时应为绿色。这是我的 json 文件：

"children": [
    {
      "children": [
        {
          "children": [],
          "id": 50,
          "name": "gfj",
            "checked": true

        }
      ],
      "id": 51,
      "name": "malek"
    },
    {
      "children": [
        {
          "children": [
            {
              "children": [],
              "id": 49,
              "name": "nice",
                "checked": true

            }
          ],
          "id": 48,
          "name": "amira",
            "checked": false
        }
      ],
      "id": 47,
      "name": "mahdi"
    }
  ],

我能够从 json 文件中获取属性“已检查”到我的 js 文件中，但我不知道如何更改颜色，因为颜色在 css 文件中已更改。


_checked = function(d){ return d.checked; },

这是css文件：


/*
    Example fishbone styling... note that you can't actually change
    line markers here, which is annoying
*/

html, body{ margin: 0; padding: 0; overflow: hidden;}

/* get it? gill? */
*{ font-family: "serif", "serif"; }


.label-0{ font-size: 2em }
.label-1{ font-size: 1.5em; fill: #06405a; }
.label-2{ font-size: 1em; fill: #06405a; }
.label-3{ font-size: .9em; fill: #888; }
.label-4{ font-size: .8em; fill: #aaa; }

.link-0{ stroke: #188fc6; stroke-width: 3px}
.link-1{ stroke: #188fc6; stroke-width: 2px}
.link-2, .link-3, .link-4{ stroke: #188fc6; stroke-width: 2px; }

链接是图中的箭头，每个箭头都有自己的颜色和大小。我的问题是：如何使用我在 js 文件中获取的属性“已检查”并在 css 文件中动态更改颜色。非常感谢。

【问题讨论】：

你不能改变 CSS 文件的内容，你也不需要。但是您可以有条件地将特定的 CSS 样式（颜色）添加到您的 HTML 中。这包括更改 HTML 元素上的属性，例如 class 或 style。

标签： javascript html css json angular

【解决方案1】：

我猜你不能动态地改变你的 css 文件。但是，您可以通过执行类似于我在下面建议的方案的操作来获得所需的行为。

关键是根据 json 中每个项目的“checked”属性动态地改变你的风格。为此，您可以使用例如 Angular 指令 ngClass

CSS

istrueclass {
   color:green;
}

isfalseclass {
   color:red;
}
...

HTML

<div *ngFor="child1 of children">
   <div *ngFor="child2 of child1">
      <div *ngFor="lastChild of child2">
                <span [ngClass]="{ 
                   'istrueclass': lastChild.checked,
                   'isfalseclass': lastChild.checked,
                }">
                   {{ lastChild.name }}
                </span>
   </div>
</div>

【讨论】：

【解决方案2】：

您可以根据从 json 文件返回的内容动态地将 class 值设置为 html 元素。

例如：

Javascript 文件

//grab your html element
const htmlElement = document.getElementById('id_here');

if (_checked === true) {
   htmlElement.removeClass('true_case')
   htmlElement.addClass('false_case')
} else {
   htmlElement.removeClass('true_case')
   htmlElement.addClass('false_case')
}

并根据这些类设置 css 样式。

.true_case {
  color: green;
}
.false_case {
   color: red;
}

此解决方案可能会显示一些错误[此错误可以轻松解决]，但该方法完全正确并且可以帮助您。

【讨论】：