javascript - 在运行时更改背景颜色

我希望能够根据框中的文本在运行时更改网格框的颜色。我有一个称为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>

最佳答案

没有用于调用JavaScript函数的CSS语法。您需要从JavaScript端开始处理。

可能您应该设置一个DOM Ready event listener来获取all the divs you care about，然后遍历它们以访问其style properties来设置所需的颜色。因为您需要从某个地方获取“游泳”，所以您可能想使用a data attribute。



话虽如此，最好完全不使用JS，而改用类。

class="grid-item swim">

和

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