Question

动态创建按钮的单独颜色

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++;

Answer 1

一个简单的解决方案是拥有2个不同的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中。

Answer 2

您可以尝试以下选项，通过使用颜色区分访问和未访问的按钮。

<强>的JavaScript

＆＃13;

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

＆＃13;

.unvisited-color{
  background-color:#D3D578;
}

.visited-color{
  background-color:#E5E5E5;
}

＆＃13;

最后点击按钮和访问按钮的单独颜色未访问按钮

动态创建按钮的单独颜色

2 个答案: