我希望能够在运行时根据框中的文本更改网格框的颜色。我有一个称为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事件侦听器,该侦听器将获取您关心的所有div,然后遍历它们以访问其样式属性以设置所需的颜色。由于您需要从某个地方获取“游泳”,因此您可能想使用data属性。
话虽如此,最好完全不使用JS,而改用类。
class="grid-item swim">
和
.grid-item.swim { background-color: red; }
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句