Change colour dynamically according to json attribute-CodePudding

I have a json file in which am storing my data in a tree to generate some kind of a diagram , I want to be able to change the colour of the diagram conditionally according to an attribute in json , when it is false the colours becomes red , when it's true it becomes green. This is my json file

"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"
    }
  ],

am able to get the attribute checked from the json file inside my js file but don't know how to change the colour given the colour is changed in css file


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

This is the css file :


/*
    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; }

the links are the arrows in the diagram and every arrow has its own colour and size , my question how do I use the attribute checked that am getting in the js file to change the colour dynamically in the css file and thank you so much.

CodePudding user response：

I guess you can't change dinamically your css file. However, you can get the behavior you want by doing something similar to the scheme I propose below.

The point is to change your style dinamically, depending on the "checked" attribute of each of the items in your json. To do this, you can use, for instance, the Angular directive 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>

CodePudding user response：

you can dynamically set the class value to html element based on what you get returned from json file.

for example:

Javascript File

//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')
}

And accordinlgy set the css styles for these classes.

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

this solution might show some error [this error can be solved easily] but the approach is perfectly correct and can help you.