在運行時更改背景顏色

Question

我希望能夠在運行時根據框中的文本更改網格框的顏色。 我有一個名為 checkColor(str) 的 JS 函數，它將返回一個顏色，但我無法找出正確的語法來讓它工作。

<div class="grid-item" style="background-color:checkColor(Swim)">    
    {{bunk.activities[_-1]}}
</div>


<script>
function checkColor(s){
    if (s == "Swim"){
        return 'red'
    }
}

</script>

Answer 1

沒有用於調用 JavaScript 函數的 CSS 語法。 您需要從 JavaScript 端解決這個問題。

可能您應該設置一個DOM Ready 事件偵聽器，它將獲取您關心的所有 div ，然后循環訪問它們的樣式屬性以設置您想要的顏色。 由於您需要從某個地方獲取“游泳”，因此您可能需要使用數據屬性。

---

也就是說，為此完全忘記 JS 並使用類可能會更好。

class="grid-item swim">

和

.grid-item.swim { background-color: red; }

Answer 2

好吧，你不能在style屬性中添加js函數！ 相反，您需要使用 JavaScript 和 CSS 更改背景：

 var element = document.getElementById("item_1"); element.classList.add("swim");

 .swim{ background-color: red; }

 <div id="item_1" class="grid-item"> Hello World </div>

上面我們注入了一個紅色背景樣式的類名“游泳”。

Answer 3

如果您將要檢查的值設置為“數據值”，則可以這樣做。 如果“data-value” == Swim 應用顏色，則使用類 grid-item 循環所有元素。

 function checkColor(s,item){ if (s == "Swim"){ item.style.backgroundColor = "red"; } } var item = document.getElementsByClassName('grid-item') for (var i in item){ checkColor(item[i].getAttribute('data-value'),item[i]) }

 <div class="grid-item" data-value="Swim"> {{bunk.activities[_-1]}} </div> <div class="grid-item" data-value="Swim"> {{bunk.activities[_-1]}} </div>

Answer 4

`function checkColor(s){
    if (s == "Swim"){
        return 'red'
    }
 }    
 document.getElementsByClassName('grid-item').style.background = checkColor("Swim");

` 這應該將“grid-item”的背景設置為紅色

Answer 5

您不能從 CSS 調用 java 腳本函數，而不是我建議您使用 java 腳本並使用所有顏色和項目名稱進行切換。

 function checkColor(){ var elements = document.getElementsByClassName(); for(var x = 0;x < elements.length;x++){ switch(elements[x].innerHtml){ case 'swim':{ elements[x].style.background = 'red'; break; } . . . . } } }