在运行时更改背景颜色

Question

I would like to be able to change the color of a gridbox at runtime based on the text in the box. I have a JS function called checkColor(str) which will return a color but I can't figure out the correct syntax to get it to work.

<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

There is no CSS syntax for calling a JavaScript function. You need to approach this from the JavaScript end.

Possibly you should set up a DOM Ready event listener which will get all the divs you care about and then loop over them accessing their style properties to set the colour you want. Since you would need to get "Swim" from somewhere you might want to use a data attribute .

---

That said, it would probably better to just forget about JS entirely for this and use a class instead.

class="grid-item swim">

and

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

Answer 2

Well, you can not add js function in style attribute! Instead, you need to change the background using 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>

Above we injected a class name 'swim' that has a style of red background.

Answer 3

You can do it this way, if you set the value to check as "data-value". Loop all elements with class grid-item, if "data-value" == Swim apply color.

 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");

` This should set "grid-item"'s background to red

Answer 5

you cant call java script function from CSS rather than that i suggest to you to use java script and make switch with all colors and item names.

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