为动态创建的按钮分色
var btn = document.createElement("BUTTON");
btn.style.backgroundColor = "D3D578";
btn.setAttribute("id", "btn" + buttonId);
btn.setAttribute("class", "class" + classId);
btn.innerText = "click" + buttonId;
btn.innerText = "click" + classId;
console.log(btn);
document.body.appendChild(btn);buttonId++;classId++;
发布于 2016-05-02 20:21:33
一个简单的解决方案是有两个不同的CSS类,并使用Javascript onClick来管理它:
CSS
.visited-button{
background-color: #342762; /*visited color*/
}
.normal-button{
background-color: #ff76aa; /*non-visited color*/
}
Javascript
// your function
var btn = document.createElement("BUTTON");
btn.style.backgroundColor = "D3D578";
btn.setAttribute("id", "btn" + buttonId);
btn.setAttribute("class", "class" + classId);
// Add this here
btn.onclick=changeButtonColor(btn);
btn.innerText = "click" + buttonId;
btn.innerText = "click" + classId;
console.log(btn);
document.body.appendChild(btn);buttonId++;classId++;
// end of your function
function changeButtonColor(button){
button.class = "visited-button";
}
请注意,此解决方案是视图范围的。这意味着一旦用户离开页面并再次进入,每个按钮都将被取消访问。如果你想做会话作用域(即刷新页面后按钮仍然会被访问),那么你将不得不在服务器端处理它,将此信息存储在会话本身或cookie中。
发布于 2016-05-02 20:34:00
您可以尝试下面的选项,通过颜色来区分已访问和未访问的按钮。
JavaScript
function generateButtons(totalBtns){
for(var i=0; i<totalBtns; i++){
var btn = document.createElement("button");
btn.setAttribute("class", "unvisited-color");
btn.innerText = "clickbtn" + i;
btn.addEventListener('click', onBtnClick);
document.body.appendChild(btn);
}
}
function onBtnClick(event){
event.target.setAttribute("class", "visited-color");
}
generateButtons(3); //generate buttons dynamically
.unvisited-color{
background-color:#D3D578;
}
.visited-color{
background-color:#E5E5E5;
}
https://stackoverflow.com/questions/36982045
复制相似问题