按钮在切换到暗/亮模式时更改 CSS 样式
Posted
技术标签:
【中文标题】按钮在切换到暗/亮模式时更改 CSS 样式【英文标题】：button change css style at switch to dark / lightmode 【发布时间】：2021-12-30 14:59:03 【问题描述】：旧的 （你好，提前谢谢你，我想用暗模式做一个按钮，如果你点击它，它就会变成暗模式，然后按钮被称为白色模式，然后当你再次点击它时，它变成白色模式，按钮是再次调用暗模式。）
新的 （现在单击按钮时缺少更改样式）
function myFunction()
var element = document.page;
element.classList.toggle("dark-mode");
<html>
<head>
<style>
.page
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
.dark-mode
background-color: black;
color: white;
</style>
</head>
<body>
<div class="page">Hello</div>
<button onclick="myFunction()">dark mode</button>
</body>
</html>【问题讨论】：
【参考方案1】：我不相信 document.page 是有效的 js。将类分配给 body
document.getElementsByTagName('button')[0].textContent='dark-mode';
function myFunction()
var element = document.getElementsByTagName('body')[0];
element.classList.toggle("dark-mode");
var button = document.getElementsByTagName('button')[0];
if(button.textContent == 'dark-mode')button.textContent='white-mode';
else button.textContent='dark-mode';
<html>
<head>
<style>
.page
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
.dark-mode
background-color: black;
color: white;
</style>
</head>
<body>
<div class="page">Hello</div>
<button onclick="myFunction()"></button>
</body>
</html>【讨论】：
以上是关于按钮在切换到暗/亮模式时更改 CSS 样式的主要内容，如果未能解决你的问题，请参考以下文章