Блог

Главная - Вопросы по программированию - Динамическое изменение цвета в js

Динамическое изменение цвета в js

#javascript #html #css #json #angular

Вопрос:

У меня есть файл 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. Огромное спасибо.

Комментарии:

1. Вы не можете изменять содержимое CSS-файлов, и вам это не нужно. Но вы можете добавить определенные стили CSS(цвета) в свой HTML условно. Это включает в себя изменение свойств, таких как class или style в ваших HTML-элементах.

Ответ №1:

Я думаю, что вы не можете динамично изменить свой css-файл. Тем не менее, вы можете получить желаемое поведение, выполнив что-то похожее на схему, которую я предлагаю ниже.

Смысл в том, чтобы изменить свой стиль динамически, в зависимости от атрибута «проверено» каждого из элементов в вашем json. Для этого вы можете использовать, например, угловую директиву ngClass

CSS

 istrueclass {  color:green; }  isfalseclass {  color:red; } ...

HTML

 lt;div *ngFor="child1 of children"gt;  lt;div *ngFor="child2 of child1"gt;  lt;div *ngFor="lastChild of child2"gt;  lt;span [ngClass]="{   'istrueclass': lastChild.checked,  'isfalseclass': lastChild.checked,  }"gt;  {{ lastChild.name }}  lt;/spangt;  lt;/divgt; lt;/divgt;

Ответ №2:

вы можете динамически установить значение класса в html-элемент на основе того, что вы получаете из файла json.

например:

Файл 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; }

это решение может содержать некоторую ошибку [эту ошибку можно легко устранить], но подход совершенно правильный и может вам помочь.

Метки: