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>

{{bunk.activities[_-1]}
功能检查颜色（s）{
如果（s==“游泳”）{
返回“红色”
}
}

好吧，您不能在

样式

属性中添加js函数！相反，您需要使用JavaScript和CSS更改背景：

var-element=document.getElementById（“item_1”）；
元素。类列表。添加（“游泳”）
。游泳{
背景色：红色；
}

你好，世界
调用JavaScript函数没有CSS语法。您需要从JavaScript端着手解决这个问题

可能你应该设置一个可以获得的颜色，然后在它们上面循环访问它们来设置你想要的颜色。因为你需要从你想用的地方“游泳”


也就是说，完全忘记JS，改用类可能更好

class="grid-item swim">

及

`
这应该将“网格项”的背景设置为红色
如果您将值设置为“数据值”，则可以这样做。
如果“数据值”==应用颜色，则使用类网格项循环所有元素


功能检查颜色（s，项目）{
如果（s==“游泳”）{
item.style.backgroundColor=“红色”；
}
}
var item=document.getElementsByClassName（'grid-item'）
用于（项目中的变量i）{
checkColor（项[i].getAttribute（'data-value'），项[i]）
}

{{bunk.activities[_-1]}
{{bunk.activities[_-1]}
您不能从CSS调用java脚本函数，而我建议您使用java脚本并使用所有颜色和项目名称进行切换


函数checkColor（）{
var elements=document.getElementsByClassName（）；
对于（var x=0；x}
如果你有数百个不同的名字会发生什么？如果在中有类名，则可能会意外地将css应用于元素use@StefanAvramovic-在类名前加上不会冲突的描述性前缀<代码>活动\u swim

例如。@StefanAvramovic-因为（a）HTML是一种语义语言，您应该尽可能地表达表示，（b）问题意味着，在生成HTML时，可用的数据是“swim”而不是“red”

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

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