title: how to use different colors to mark nodes in cytoscape.js?
body: <p>currently I'm trying to realize this function:</p>
  
  <p>I've created a color selector on the website. Once a user selects a specific color, the colors of nodes he/she selected and their neighbouring nodes will be changed into the color selected after tap. </p>
  
  <p>For example, in the case below, if I select "red" and then choose the node "cytoscape", the "cytoscape" and the "cytoscape.js" will both be red. Now if I change the color into "green" and then I click on "test", the "test" node will change into green but the "cytoscape" and "cytoscape.js" still remain "red". Does someone know how to do this?</p>
  
  <p>Thank you!</p>
  
  <p><strong>Here is my code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>        var cy = cytoscape({
              container: document.getElementById('cy'),
  
              style: [
                  {
                      selector: 'node',
                      style: {
                          'label': 'data(name)',
                          'text-valign': 'center',
                          'color':"white",
                          'text-outline-color': 'orange',
                          'text-outline-width': 2,
                          'background-color': 'orange',
                      }
                  },
  
                  {
                      selector: 'edge',
                      style: {
                          'width':2,
                          'line-color':'grey',
                      }
                  },
  
                  {
                      selector: 'node.highlight',
                          style: {
                              'label': 'data(name)',
                              'text-valign': 'center',
                              'color':"white",
                              'text-outline-color': 'red',
                              'text-outline-width': 2,
                              'background-color': 'red',
                          }
                  },
  
                  {
                      selector: 'node.semitransp',
                      style:{ 'opacity': '0.5' }
                  },
  
                  ],
  
              elements: {
  
                  nodes: [
                      { data: { id: 'desktop', name: 'Cytoscape' } },
                      { data: { id: 'test', name: 'Test'} },
                      { data: { id: 'js', name: 'Cytoscape.js'} },
                      ],
                  edges: [
                      { data: { source: 'desktop', target: 'js' } },
                      { data: { source: 'js', target: 'desktop' } }
                      ]
              },
  
            layout: {
              name: 'cose',
              idealEdgeLength: 100,
              nodeOverlap: 20,
              refresh: 20,
              fit: true,
              padding: 30,
              randomize: false,
              componentSpacing: 100,
              nodeRepulsion: 400000,
              edgeElasticity: 100,
              nestingFactor: 5,
              gravity: 80,
              numIter: 1000,
              initialTemp: 200,
              coolingFactor: 0.95,
              minTemp: 1.0
            },
              minZoom:0.5,
              maxZoom:3,
              motionBlur: true,
              wheelSensitivity: 0.05,
          });
          cy.on('tap', 'node', function(e){
              var ele = e.target;
              if(cy.elements('node[background-color:orange]')){
                  cy.elements().difference(ele.outgoers());
                  ele.addClass('highlight').outgoers().addClass('highlight');
              }
          });
  
          cy.on('cxttap', 'node', function(e){
              var ele = e.target;
              ele.removeClass('highlight').outgoers().removeClass('highlight');
          });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"&gt;&lt;/script&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;style&gt;
          #cy{
              width: auto;
              height: 500px;
              display: block;
              background-color: #F5F5F5;
          }
              #box{position: absolute;}
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;select id="color_selector"&gt;
          &lt;option value="red"&gt;red&lt;/option&gt;
          &lt;option value="green"&gt;green&lt;/option&gt;
          &lt;option value="orange"&gt;orange&lt;/option&gt;
      &lt;/select&gt;
      &lt;div id="cy"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>