时间戳

首页 > 解决方案 > 切换按钮：使用背景颜色隐藏计数器编号

javascript - 切换按钮：使用背景颜色隐藏计数器编号

问题描述

Onclick 按钮，我想用背景色 ieyellow 隐藏这个计数器的数字）。例如，我想要数字前面的黄色，例如 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)');" />

标签： javascript

解决方案

z-index: -1这是为相对于标签的计数器文本使用规则p。有必要将计数器包装在一个附加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;
}

此外，您的 tagp和 taginput具有相同的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)');" />

推荐阅读