javascript - (深色模式)添加 "dark-theme"后如何改变背景？

Question

所以我的网站上有一个按钮可以切换暗模式。我在检查中看到切换正在工作，但出于某种原因，没有看到#content .dark-theme。我以为 child 优先。

HTML

<!-- Main Content -->
  <div id="content">

CSS

    #content {
    background: rgb(248, 201, 201);
    color: black;
}

#content .dark-theme {
    background: rgb(49, 51, 71);
    color: white;
}

JS

document.getElementById('change-theme-btn').addEventListener('click', function () {
content.classList.toggle('dark-theme');

});

Answer 1

您应该使用#content.dark-theme 来正确定位您需要的元素；在这里您可以看到它的实际效果。

在 CSS 中，当您编写:#content .dark-theme 时，您正在尝试使用作为元素子元素的 dark-theme 类来定位元素带有一个 id content。

在您的情况下，您想要定位的是元素 #content 本身；所以你应该写:#content.dark-theme 或者只是#content;有了这个，你的目标元素 #content 也有一个类 dark-theme

document.getElementById('change-theme-btn').onclick = function() {
  content.classList.toggle('dark-theme');
}

#content {
  background: rgb(248, 201, 201);
  color: black;
  height: 150px;
}

#content.dark-theme {
  background: rgb(49, 51, 71);
  color: white;
}

<div id="content">
  This is content
</div>
<button id="change-theme-btn">Change</button>