如何用變量設置div的背景顏色？

我想根據變量box.benefit的值爲red至比例上的div-box着色。變量box.benefit取自0 - 255。如何用變量設置div的背景顏色？

問題是部分，我試圖通過減法得到反函數。沒有減法，它正在工作。

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

我該如何做到這一點？

來源

2012-11-20 bigbaier

在CSS，你不能「做數學」。一個選項是使用javascript來完成數學運算，即計算rgb值並設置div的樣式。你從哪裏獲得box.benefit價值？ – Pankrates

我通過django.view中的幾個框傳遞一個字段。然後我在for循環中創建了應根據其優點着色的框 – bigbaier

我試圖從樣式部分調用javascript函數並返回相反的顏色，但是調用未執行。 – bigbaier

有一種方法可以在CSS中使用SCSS進行計算和使用變量，也稱爲「Sassy CSS」。

這是從他們的網頁中的樣品例如：

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

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

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

還有其他的功能，使它非常漂亮的use.Also，它會自動嵌入在「Ruby on Rails的」。

來源

2012-11-20 09:13:06 gotqn

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-20 09:17:15 Scrimothy

感謝您的快速響應！我不使用Ember，我在我的款式部分中定義了類似「可拖動」的類：。可拖動{ \t \t padding：4px; \t \t margin：2px; \t \t border：2px outset rgb（237,237,237）; \t \t background：#ffffff; \t \t float：left; \t \t height：20px; \t \t光標：移動; \t \t color：＃000; } 我可以以某種方式構建一個函數來計算逆？ – bigbaier

我不熟悉'{{}}'符號。你在用什麼？ – Scrimothy

我使用text/css，draggable是一個類 – bigbaier

考慮到這一事實，目前還不清楚我從您的文章何時或如何顏色的變化被觸發，你如何得到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); 
});

來源

2012-11-20 22:46:14 Pankrates

謝謝您的回覆。顏色必須從一開始就設置正確，但不是當單擊框時！ box.benefit來自我從django.view傳遞給html模板的變量 – bigbaier

好的，在這種情況下，如果您能夠將值傳遞給視圖，則應該只計算綠色值服務器端（就像您使用box.benefit和box.cost）並將其作爲'{{box.green}}'傳遞給它。 – Pankrates

我想將盒子模型中的變量數量降到最低。因此，我不想在盒子模型中添加一個「綠色」變量，因爲它沒有任何附加信息 – bigbaier

如何用變量設置div的背景顏色？

回答

相關問題