Tengo un archivo json en el que almaceno mis datos para generar algún tipo de diagrama. Quiero poder cambiar el color del diagrama condicionalmente según un atributo en json. Cuando es falso los colores deben ser rojos, cuando es verdadero debe ser verde. Este es mi archivo 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" } ],Puedo obtener el atributo "marcado" del archivo json en mi archivo js, pero no sé cómo cambiar el color porque el color se cambia en el archivo css.
_checked = function(d){ return d.checked; },Este es el archivo 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; }Los enlaces son las flechas en el diagrama y cada flecha tiene su propio color y tamaño. Mi pregunta es: ¿cómo uso el atributo "marcado" que obtengo en el archivo js y cambio el color dinámicamente en el archivo css? Muchas gracias.
puede establecer dinámicamente el valor de la clase en el elemento html en función de lo que obtiene del archivo json.
por ejemplo:
Archivo 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') }Y en consecuencia establecer los estilos css para estas clases.
.true_case { color: green; } .false_case { color: red; }esta solución puede mostrar algún error [este error se puede resolver fácilmente] pero el enfoque es perfectamente correcto y puede ayudarlo.
Supongo que no puedes cambiar dinámicamente tu archivo css. Sin embargo, puede obtener el comportamiento que desea haciendo algo similar al esquema que propongo a continuación.
El punto es cambiar su estilo dinámicamente, dependiendo del atributo "marcado" de cada uno de los elementos en su json. Para hacer esto, puede usar, por ejemplo, la directiva 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>