按钮背景图像切换不会返回到原始背景图像

Question

function myFunction() {
var element = document.body;
element.classList.toggle("light-mode");
var btndrk = document.getElementById('drk');
if (btndrk.style.backgroundImage === "url('https://assets.codepen.io/1462889/moon.svg')") {
onlick(btndrk.style.backgroundImage = "url('https://assets.codepen.io/1462889/sun.svg')");
} else {
btndrk.style.backgroundImage = "url('https://assets.codepen.io/1462889/moon.svg')";
}

}

#drk {
position: relative;
height: 70%;
width: 3.3%;
top: 15%;
background-color: rgb(105, 50, 255);
color: white;
font-family: 'Advent Pro', sans-serif;
border-radius: 5px;
background-image: url('https://assets.codepen.io/1462889/moon.svg');
background-size: 45% 45%;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
border: none;
transition: all 200ms linear;
box-shadow: 0 0 1vw rgba(255,235,167,.25);

}

<button id="drk" onclick="myFunction()"></button>

我想让原始背景图片在第二次点击时返回，sun.SVG 在第三次点击时显示，依此类推。现在，当我刷新页面时原始背景图像显示，但单击后它变为 sun.SVG 并且不会变回。我想让它在两者之间切换。

Answer 1

无需在 JS 中进行图像更改。

JS 可以简单地是：

document.getElementById('drk').addEventListener("click", function() {
    document.body.classList.toggle("light-mode");
});

对于 CSS 部分，您需要添加：

body.light-mode #drk {
    background-image: url('https://assets.codepen.io/1462889/moon.svg');
}
body:not(.light-mode) #drk {
    background-image: url('https://assets.codepen.io/1462889/sun.svg');
}

document.getElementById('drk').addEventListener("click", function() {
    document.body.classList.toggle("light-mode");
});

html,body{height:100px;}

#drk {
    position: relative;
    height: 70%;
    width: 3.3%;
    top: 15%;
    background-color: rgb(105, 50, 255);
    color: white;
    font-family: 'Advent Pro', sans-serif;
    border-radius: 5px;
    background-image: url('https://assets.codepen.io/1462889/sun.svg');
    background-size: 45% 45%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    border: none;
    transition: all 200ms linear;
    box-shadow: 0 0 1vw rgba(255,235,167,.25);
}
body:not(.light-mode) {
    background: #555;
}
body.light-mode #drk {
    background-image: url('https://assets.codepen.io/1462889/moon.svg');
}

<button id="drk"></button>

按钮背景图像切换不会返回到原始背景图像

Button background-image toggle not going back to original background-image

javascript

button

toggle