0

我做了一个按钮，将所有页面更改为暗模式。
我有一些深色按钮，当我单击将页面更改为深色模式的按钮时，我想将其更改为浅色。

问题是当我想将页面更改为暗模式时它可以工作，但是使用暗按钮它只能工作一次，而第二个按钮第一次不起作用。

您将在下面找到我编写的代码。

谢谢。

let darkBackground = document.querySelector('body');
let darkModeBtn = document.getElementById('darkModeBtn');
let btnIcon = document.getElementById('btnIcon');
let codeButton = document.getElementsByClassName('btn-dark');

darkModeBtn.addEventListener('click', function() {
    darkBackground.classList.toggle('darkbackground');
    btnIcon.classList.toggle('fa-sun');
    btnIcon.classList.toggle('fa-moon');
    for (var i = 0, len = codeButton.length; len > i; i++) {
        codeButton[i].classList.toggle('btn-light');
        codeButton[i].classList.toggle('btn-dark');

    };
});
.darkbackground {
    background-color: rgb(46, 45, 49);
    transition: .15s;
    color: white;
}

.darkmodebtn {
    font-size: 1.50rem;
    padding: 0.5rem 0.85rem;
    background-color: rgba(47, 128, 237, 1);
    outline: none;
    border: 0;
    border-radius: 20px;
    color: white;
    position: fixed;
    bottom: 18px;
    right: 18px;
}

.darkmodebtn:focus {
    outline: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <a href="#" class="btn btn-dark">Light and Black</a>
    <a href="#" class="btn btn-dark">Light and Black</a>
    <a href="#" class="btn btn-dark">Light and Black</a>
    <button class="darkmodebtn" id="darkModeBtn"><i id="btnIcon" class="fas fa-moon"></i></button>
</body>
</html>

4

1 回答 1

1 

let darkBackground = document.querySelector('body');
let darkModeBtn = document.getElementById('darkModeBtn');
let btnIcon = document.getElementById('btnIcon');
let codeButton = document.getElementsByClassName('code-btn');

darkModeBtn.addEventListener('click', function() {
    darkBackground.classList.toggle('darkbackground');
    btnIcon.classList.toggle('fa-sun');
    btnIcon.classList.toggle('fa-moon');
    for (var i = 0, len = codeButton.length; len > i; i++) {
        codeButton[i].classList.toggle('btn-light');
        codeButton[i].classList.toggle('btn-dark');

    };
});
.darkbackground {
    background-color: rgb(46, 45, 49);
    transition: .15s;
    color: white;
}

.darkmodebtn {
    font-size: 1.50rem;
    padding: 0.5rem 0.85rem;
    background-color: rgba(47, 128, 237, 1);
    outline: none;
    border: 0;
    border-radius: 20px;
    color: white;
    position: fixed;
    bottom: 18px;
    right: 18px;
}

.darkmodebtn:focus {
    outline: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <a href="#" class="btn code-btn btn-dark">Light and Black</a>
    <a href="#" class="btn code-btn btn-dark">Light and Black</a>
    <a href="#" class="btn code-btn btn-dark">Light and Black</a>
    <button class="darkmodebtn" id="darkModeBtn"><i id="btnIcon" class="fas fa-moon"></i></button>
</body>
</html>

于 2021-04-05T09:49:15.137 回答