Question

我想根据变量div-box的值，在red到green比例上为box.benefit着色。变量box.benefit来自0 - 255。

问题是green部分，我试图通过减去得到逆。如果没有减法，它就可以了。

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

我该如何做到这一点？

Answer 1

考虑到我从您的帖子中不清楚何时或如何触发颜色变化以及如何获得box.benefit值，我做了这个例子fiddle来解释这是怎么回事用jQuery轻松完成。现在，在单击目标div时会模拟触发器。 'red'值现在是硬编码的，但如果您解释它的设置位置，则可以动态获取。

html和初始css如下

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

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

和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

style属性无法取得等式。您需要计算变量本身的最终值，然后将其输入rgb。

我对Ember.js并不熟悉，但看起来你可能正在使用它。如果你是，你可以尝试这样的事情：

<强>灰烬

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

有一种方法可以使用SCSS（也称为“Sassy CSS”）在CSS中进行计算和使用变量。

这是他们网页上的示例：

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

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

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

还有其他一些功能使它非常适合使用。它也会自动嵌入“Ruby on Rails”中。

如何使用变量设置div的背景颜色？

3 个答案: