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

【问题标题】：Javascript to change the div color depending on the content of anotherJavascript根据另一个内容更改div颜色
【发布时间】：2020-09-15 13:31:32
【问题描述】：

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

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

<div class="event-background">

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

</div>

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

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

【问题讨论】：

您将编写一些代码来检查内部 div 的内容并将其应用于外部 div style 属性，可能backgroundColor 属性的style 属性将最感觉 - 另外，我会使用带有属性键 North South 等的对象，并以适当的颜色作为值

标签： javascript html css wordpress

【解决方案1】：

给父 div 一个 id，例如“event-bg”，如下面的 sn-p 所示：

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

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

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

【讨论】：