javascript - 切换按钮 : Hide counter numbers with background Color

Question

点击按钮，我想用背景色(即黄色)隐藏这个计数器的数字。例如，我想要数字前面的黄色，比如 z-index 1。

如果我再次单击，我想移除黄色并再次显示计数器的数字，例如 z-index -1。可能吗？我试过这个..谢谢

var countStep = 0;

function counter() {
  document.getElementById("btnToggle").innerHTML = ++countStep;
}

function btnColor(btn, color) {
  var property = document.getElementById(btn);
  if (property.className !== 'toggled') {
    property.style.backgroundColor = color;
    property.className = 'toggled'
  } else {
    property.style.backgroundColor = "rgb(244,113,33)";
    property.className = '';
  }
}

#btnToggle {
  background: #222;
  color: lime;
}

<p id="btnToggle">OFF</p>
<button onClick="countNumbers = setInterval(counter, 1000)">Play</button>

<button onClick="clearInterval(countNumbers)">Stop</button>

<input type="button" id="btnToggle" value="Toggle" onclick="btnColor('btnToggle','rgb(255,242,0)');" />

Answer 1

这是为相对于标签p 的计数器文本使用规则z-index: -1。有必要将计数器包装在一个额外的 span 标签中:

<p id="btnToggle"><span>OFF</span></p>

使用querySelector():

var countContent = document.querySelector("#btnToggle span");

另外，在js的逻辑中，if { ... }条件里面，需要赋负值z-index:

countContent.style.zIndex = '-1';

否则，禁用(默认):

countContent.style.zIndex = '';

最重要的是，span 标签必须设置为absolute 和#btnToggle relative。将此添加到您的 CSS:

#btnToggle span {
    position: absolute;
}

此外，您的标签 p 和标签 input 具有相同的 id。这是不正确的，因为 id 是一个唯一的属性。

var countStep = 0;
var countContent = document.querySelector("#btnToggle span");

function counter() {
    countContent.innerHTML = ++countStep;
}

function btnColor(btn, color) {
    var property = document.getElementById(btn);
    if (property.className !== "toggled") {
        property.style.backgroundColor = color;
        property.className = "toggled";
        countContent.style.zIndex = '-1';
    } else {
        property.style.backgroundColor = "rgb(244,113,33)";
        property.className = "";
        countContent.style.zIndex = '';
    }
}

#btnToggle {
    background: #222;
    color: lime;
    position: relative;
    height: 18px;
}

#btnToggle span {
    position: absolute;
}

<p id="btnToggle"><span>OFF</span></p>
<button onClick="countNumbers = setInterval(counter, 1000)">Play</button>
<button onClick="clearInterval(countNumbers)">Stop</button>
<input type="button" id="btnToggle_two" value="Toggle" onclick="btnColor('btnToggle','rgb(255,242,0)');" />