gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:14:33 24 4
gpt4 key购买 nike

所以我的网站上有一个按钮可以切换暗模式。我在检查中看到切换正在工作,但出于某种原因,没有看到#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');

});

最佳答案

您应该使用#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>

关于javascript - (深色模式)添加 "dark-theme"后如何改变背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55191787/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com