Javascript根据另一个内容更改div颜色

Question

I am creating a calendar for a wordpress site and the events are created using a plugin but I want to be able to dynamically change the background color.

I want to modify the event background in the event-background div depending on the text is used in the sub div. How can I select and modify the style using javascript.

<div class="event-background">

    <div class="event-place">South</div>

</div>

The event-place div and text are automatically generated so I can't add anything to the div attribute but the text will always either by North, South, East, West and I would like to apply a different background color for each.

I think it should be possible using If Then Else statements in Javascript but I'm not sure how to implement it.

Answer 1

Give the parent div an id such as "event-bg" as seen in the following snippet:

<div id="event-bg" class="event-background">
  <div class="event-place">South</div>
</div>

And then use this code:

  var backgroundRef = document.getElementById("event-bg");

  var innerDirectionText = backgroundRef.firstElementChild.innerHTML;

  switch(innerDirectionText) {
    case "North":
      backgroundRef.style.background = "green";
      break;
    case "East":
      backgroundRef.style.background = "yellow";
      break;
    case "South":
      backgroundRef.style.background = "pink";
      break;
    case "West":
      backgroundRef.style.background = "blue";
      break;
    default:
  }

The above code decides what the background colour should be. I just used some random background colours.

My answer does not cover any error catching or default cases and assumes that your child will always be the first within the parent .