Question

我是JavaScript新手，我用JavaScript创建了两个动态div。当我点击第一个div时，它变为活动状态。我希望在点击它时更改div背景颜色，然后是它应该变为活动状态。当我点击第二个div时，第二个div应该改变背景颜色，第一个div将它恢复为原始颜色。

当我同时点击时，我想更改btnCage和btnMice的bgcolor。

var buttonDiv= document.createElement('div');

var btnCage = document.createElement('div');
btnCage.id = 'btnCage';
//btnCage.className = 'active';
btnCage.innerHTML = 'By Cages';
buttonDiv.appendChild(btnCage);
btnCage.onclick = function() {
     getMonthlyCensusCages()
}

var btnMice = document.createElement('div');
btnMice.id = 'btnMice';
//btnMice.className = 'active';
btnMice.innerHTML = 'By Mice';
buttonDiv.appendChild(btnMice);
btnMice.onclick = function() {
     getMonthlyCensus()
}

请帮帮我

Answer 1

您可以这样做：

btnMice.onclick = function() {
   this.style.backgroundColor = '#f00';
   btnCage.style.backgroundColor = '#ccc';
}; 

btnCage.onclick = function() {
   this.style.backgroundColor = '#f00';
   btnMice.style.backgroundColor = '#ccc';
};

Answer 2

var buttonDiv= document.createElement('div');

var btnCage = document.createElement('div');
btnCage.id = 'btnCage';
//btnCage.className = 'active';
btnCage.innerHTML = 'By Cages';
buttonDiv.appendChild(btnCage);

var btnMice = document.createElement('div');
btnMice.id = 'btnMice';
//btnMice.className = 'active';
btnMice.innerHTML = 'By Mice';
buttonDiv.appendChild(btnMice);

// change style or change className
btnCage.onclick = function() {
     this.style.backgroundColor = 'red';
     btnMice.style.backgroundColor = 'black';
     getMonthlyCensusCages();
}

btnMice.onclick = function() {
     this.style.backgroundColor = 'red';
     btnCage.style.backgroundColor = 'black';
     getMonthlyCensus();
}

单击时更改动态元素的背景颜色

2 个答案: