通过单击按钮将BODY元素的背景颜色切换为ON / OFF（CSS类）时，如何更改H2颜色？

Question

当BODY的背景色（单击按钮时切换为海蓝色）使用CSS类（包含所需的背景色样式）切换为ON / OFF时，如何更改H2颜色？

我在事件侦听器的回调函数中使用了以下条件，该函数应检查是否单击了按钮。

这里的问题是，当BODY背景为#42f4df时，我看不到H2的颜色改变。我的条件仅运行我假设的代码的else部分。 如何解决此问题并使H2相应地变色？ 我也附上了我看到的结果的图像。

最初

单击按钮一次

再次单击按钮

Answer 1

只需切换父元素的类并相应地设置其样式

function toggleclass() {
  var element = document.getElementById("parent");
  element.classList.toggle("newstyle");
}

#parent { background: #eee; padding: 20px; }
#parent h1 { color: red; }

#parent.newstyle { background: green; }
#parent.newstyle h1 { color: white; }

<div id="parent">
  <h1>My header</h1>
  <button onclick="toggleclass()">Click me</button>
</div>