是否可以在不使用 JQuery 的情況下做到這一點？
我希望一個 div 在我點擊它后改變它的陰影顏色，當我再次點擊它時，它會變回原來的顏色。這是代碼：http: //jsfiddle.net/kqv7x5f8/5/
HTML
<div id = "btn" onclick ="toShadow">
click to change shadow; click again to change back
</div>
CSS
#btn {
height: 20px;
border: 2px solid black;
box-shadow: 5px 5px black;
}
JS
var btn = document.getElementById("btn");
function toShadow(){
document.getElementById("btn").style.boxShadow="5px 5px red"
}
謝謝！
uj5u.com熱心網友回復：
在這種情況下，最好使用切換類classList.toggle()
const button = document.getElementById('btn');
button.addEventListener('click', e => e.currentTarget.classList.toggle('shadow'));#btn {
height: 20px;
border: 2px solid black;
}
.shadow {
box-shadow: 5px 5px black;
}<div id="btn">
click to change shadow; click again to change back
</div>uj5u.com熱心網友回復：
您可以使用帶有 if/else 陳述句的布林值來解決此問題
var btn = document.getElementById("btn");
var isRed = false;
function toShadow(){
if(isRed){
btn.style.boxShadow ="5px 5px black"
isRed = false;
}
else {
btn.style.boxShadow ="5px 5px red"
isRed = true;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/496031.html
標籤：javascript html css