javascript - 按钮变成颜色 css

Question

我想将 CSS 设计放入我的代码中，并在父按钮上使用绿色，在子按钮上使用黄色

function myFunction(btn) {
  var counter = parseInt(btn.getAttribute('data-counter'));
  var button = document.createElement('button');
  button.innerHTML = btn.id + '_' + counter;
  button.id = btn.id + '_' + counter;
  button.setAttribute('data-counter', '1');
  button.setAttribute('onclick', 'myFunction(this)');
  document.body.appendChild(button);
  btn.setAttribute('data-counter', ++counter);
}

<button id="btn_rv" onclick="myFunction(this)" data-counter="1">Main Button</button>

Answer 1

此代码执行以下操作:

• 将所有按钮的颜色重置为默认值
• 将当前点击按钮的颜色更改为绿色
• 将 child 的按钮颜色更改为黄色

根据您的要求修改代码。

function myFunction(btn) {
  var x = document.getElementsByTagName("button");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "";
  }
  btn.style.background='green';
  var counter = parseInt(btn.getAttribute('data-counter'));
  var button = document.createElement('button');
  button.innerHTML = btn.id + '_' + counter;
  button.id = btn.id + '_' + counter;
  button.setAttribute('data-counter', '1');
  button.setAttribute('onclick','myFunction(this)');
  document.body.appendChild(button);
  btn.setAttribute('data-counter', ++counter);
  button.style.background='yellow';
}

<button id="btn_rv" onclick="myFunction(this)" data-counter="1">Main Button</button>