Wie kann ich die Hintergrundfarbe eines Divs mit einer Variablen festlegen?

Question

Ich möchte eine Farbe div-box in einem red a green Skala entsprechend dem Wert der Variablen box.benefit . Die Variable box.benefit geht von 0 - 255 .

Das Problem ist die green Teil, in dem ich versuche, durch Subtraktion den Kehrwert zu erhalten. Ohne das Subtrahieren funktioniert es.

<div class= "draggable" id={{box.id}} 
  style="background-color:rgb({{ box.benefit }}, (255 - {{ box.benefit }}), 0); 
     width:{{box.cost}}px"></div>

Wie kann ich das bewerkstelligen?

Answer 1

In Anbetracht der Tatsache, dass mir aus Ihrem Beitrag nicht klar ist, wann oder wie der Farbwechsel ausgelöst wird und wie Sie die box.benefit Wertes, habe ich dieses Beispiel erstellt fiddle um zu erklären, wie dies mit jQuery leicht möglich ist. Der Auslöser wird nun simuliert, wenn das Ziel div angeklickt wird. Die Website 'red' Wert ist jetzt fest codiert, kann aber dynamisch ermittelt werden, wenn Sie erklären, wo er gesetzt ist.

Das html und das anfängliche css sind wie folgt

<div class="draggable" id="box.id">Target</div>

.draggable {
    width: 100px;
    height: 100px;
    background-color: rgb(255,0,0);
}

Und das Javascript

$('.draggable').click(function(){
    var boxcost = "200px";
    var boxbenefit = 25;
    var green = 255-boxbenefit;
    var rgb = "rgb("+boxbenefit+", "+green+", 0)";
    var cssObj = {
      'background-color' : rgb,
      'width' : boxcost
    }
    $(this).css(cssObj);   
});

Answer 2

Die style Das Attribut kann keine Gleichung annehmen. Sie müssen den endgültigen Wert in der Variablen selbst berechnen und ihn dann in Ihre rgb .

Ich kenne mich mit Ember.js nicht so gut aus, aber es sieht so aus, als ob Sie es verwenden könnten. Wenn ja, könnten Sie etwas wie dieses versuchen:

Ember

box = Ember.Object.create({
  benefit: 0,
  inverseColor: function() {
    return 255 - this.get('benefit');
  // Call this flag to mark the function as a property
  }.property()
});

HTML

<div class= "draggable" id={{box.id}} 
  style="background-color:rgb({{ box.benefit }}, ({{ box.inverseColor }}), 0); 
     width:{{box.cost}}px"></div>

Answer 3

Es gibt eine Möglichkeit, Berechnungen durchzuführen und Variablen in CSS zu verwenden, indem man SCSS auch bekannt als "Sassy CSS".

Dies ist ein Beispiel von ihrer Webseite:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Es gibt noch weitere Funktionen, die die Anwendung sehr angenehm machen, und sie ist automatisch in "Ruby on Rails" eingebettet.