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

Question

我正在为 wordpress 站点创建日历，并且使用插件创建事件，但我希望能够动态更改背景颜色。

我想根据子 div 中使用的文本修改事件背景 div 中的事件背景。 如何使用 javascript 选择和修改样式。

<div class="event-background">

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

</div>

事件地点 div 和文本是自动生成的，因此我无法向 div 属性添加任何内容，但文本将始终按北、南、东、西，我想为每个应用不同的背景颜色。

我认为应该可以在 Javascript 中使用 If Then Else 语句，但我不确定如何实现它。

Answer 1

为父 div 提供一个 id，例如“event-bg”，如以下代码段所示：

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

然后使用此代码：

  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:
  }

上面的代码决定了背景颜色应该是什么。 我只是使用了一些随机的背景颜色。

我的回答不包括任何错误捕获或默认情况，并假设您的孩子将始终是父级中的第一个。