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

此代码执行以下操作：

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

根据您的要求修改代码。

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>

Answer 2

您应该为任何元素样式使用类。内联样式可能会使代码重复且难以维护。

代码

＆＃13;

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)');
  button.className = "child";
  document.body.appendChild(button);
  btn.setAttribute('data-counter', ++counter);
  btn.className = "parent"
}

＆＃13;

.parent{
  background:green;
}

.child{
  background:yellow;
}

＆＃13;

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

＆＃13;

按钮变成颜色css

2 个答案:

代码