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

Question

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)');" />

Answer 1

这是使用规则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;
}

此外，您的标签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)');" />

Answer 2

首先，您需要更改 p 标记或输入选择器的 id，使它们是唯一的。 然后对 CSS 中的 p 标签选择器使用 psuedo 元素。 将其position设置为absolute并设置left 、 top 、 width和height并display: var(--display) => 从根元素设置的变量。 然后，您可以使用 css 变量设置:root样式，该变量会影响您的 p 标签样式--display: none的显示。

检查计算的样式window.getComputedStyle(document.querySelector('#btnToggle'), ':before').getPropertyValue, ':before').getPropertyValue('display') === 'none'在条件中查看是否它设置为display:none ，如果是，则将document.documentElement.style.setProperty('--display', 'block')设置为显示block else => document.documentElement.style.setProperty('--display', 'none')

 let countStep = 0, btn = document.getElementById('btn'), btnToggle = document.getElementById('btnToggle') function counter() { document.getElementById("btnToggle").innerHTML = ++countStep; } btn.addEventListener('click', function() { window.getComputedStyle(document.querySelector('#btnToggle'), ':before').getPropertyValue('display') === 'none'? document.documentElement.style.setProperty('--display', 'block'): document.documentElement.style.setProperty('--display', 'none') })

 :root { --display: none; } #btnToggle { background: #222; color: lime; } #btnToggle:before { position: absolute; background: yellow; content: ''; width: 98vw; height: 1.2em; display: var(--display); }

 <p id="btnToggle">OFF</p> <button onClick="countNumbers = setInterval(counter, 1000)">Play</button> <button onClick="clearInterval(countNumbers)">Stop</button> <input type="button" id="btn" value="Toggle" />