2

変数の値に応じてスケールに合わせてadiv-boxに色を付けたい。変数は-から始まります。redgreenbox.benefitbox.benefit0255

問題は、green減算して逆数を取得しようとする部分です。減算せずに、それは働いています。

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

どうすればこれを達成できますか？

4

3 に答える 3

2

あなたの投稿から、色の変化がいつ、どのようにトリガーされ、どのようにbox.benefit値を取得するかが不明であるという事実を考慮して、この例をフィドルにして、jQuery でこれを簡単に行う方法を説明しました。divターゲットをクリックすると、トリガーがシミュレートされるようになりました。値は現在ハードコードされていますが、'red'設定場所を説明すれば動的に取得できます。

html と初期 css は次のとおりです。

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

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

そしてジャバスクリプト

$('.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);   
});​
于 2012-11-20T22:46:14.440 に答える
1

属性は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>
于 2012-11-20T09:17:15.600 に答える
0

「Sassy CSS」としても知られるSCSSを使用して、計算を行い、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」に自動で組み込まれます。

于 2012-11-20T09:13:06.747 に答える