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 并且不會變回來。我希望它在兩者之間切換。
uj5u.com熱心網友回復：
您不需要在 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/474338.html
標籤：javascript 按钮 切换
上一篇：單擊另一個按鈕后禁用兩個按鈕
下一篇：反應原生：按下時更改組件道具