在运行时更改背景颜色

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; } . . . . } } }