前不久剛學javascript，正在練習點擊后如何添加顏色，再次點擊可以取消顏色！
但是即使在網上查了一下，還是不知道哪個語法有問題？
希望得到您的指導，謝謝~
let add = document.querySelector('.add');
let box = document.querySelector('.box');
add.addEventListener('click',function(e){
e.preventDefault();
box.setAttribute('class','blue');
}).add {
display: block;
margin-bottom: 100px;
}
.box {
width: 100px;
height: 100px;
border: 1px solid;
}
.blue {
background-color: blue;
}<a class="add" href="javascript:;">click</a>
<div class="box"></div>uj5u.com熱心網友回復：
classList.toggle正是您所需要的。如果已經存在，它將洗掉該類，如果不存在則添加它。看到這個。
let add = document.querySelector('.add');
let box = document.querySelector('.box');
add.addEventListener('click',function(e){
e.preventDefault();
box.classList.toggle('blue');
}).add {
display: block;
margin-bottom: 100px;
}
.box {
width: 100px;
height: 100px;
border: 1px solid;
}
.blue {
background-color: blue;
}<a class="add" href="javascript:;">click</a>
<div class="box"></div>您的代碼中的問題：
box.setAttribute('class','blue');
這將始終將類覆寫為“藍色”
由于您有興趣使用 執行此操作setAttribute，以下是一種方法。
let add = document.querySelector('.add');
let box = document.querySelector('.box');
// not recommended
add.addEventListener('click', function(e) {
e.preventDefault();
const existingClasses = box.getAttribute('class');
const newClasses = (existingClasses.includes('blue') ? existingClasses.replace('blue', '') : `${existingClasses} blue`).trim();
box.setAttribute('class', newClasses);
}).add {
display: block;
margin-bottom: 100px;
}
.box {
width: 100px;
height: 100px;
border: 1px solid;
}
.blue {
background-color: blue;
}<a class="add" href="javascript:;">click</a>
<div class="box"></div>uj5u.com熱心網友回復：
您的 javascript 中缺少一個事件處理程式，它再次洗掉了該類。您擁有的唯一處理程式是添加藍色的處理程式。
box.addEventListener('click',function(e){
e.preventDefault();
box.removeAttribute('class');
})
uj5u.com熱心網友回復：
你應該檢查是否box有一個類，如果有，洗掉 & 否則添加
你可以這樣做；
box.classList.contains("blue") ? box.classList.remove("blue") : box.classList.add("blue")
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/388680.html
標籤：javascript