切换按钮:用背景色隐藏计数器编号

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

这是将规则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标签必须设置为绝对和#btnToggle相对。将此添加到您的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，使它们是唯一的。然后将psuedo元素用于CSS中的p标记选择器。将其位置设置为绝对，并设置左侧、顶部和宽度以及高度并且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')设置为显示blockelse=>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" />