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

Question

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

3

当点击按钮时，我希望隐藏这个计数器的数字，同时更改背景颜色为黄色。例如，我想在数字前面显示黄色，类似于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)');" />

- Alex

1

您有两个具有相同ID的元素... <p id="btnToggle">OFF</p> 和 <input type="button" id="btnToggle"... ID属性应该只唯一地属于一个元素。 - dale landry

2个回答

1

首先，您需要更改p标签或输入选择器的ID，以便它们是唯一的。然后在CSS中使用p标签选择器的伪元素。将其位置设置为absolute，并设置left、top、width和height，以及display: var(--display) => 从根元素设置的变量。然后，您可以设置:root样式，使用影响p标签样式的css变量--display: none来开始。

在条件语句中检查计算出的样式window.getComputedStyle(document.querySelector('#btnToggle'), ':before').getPropertyValue, ':before').getPropertyValue('display') === 'none'，以查看它是否设置为display:none，如果是，则将document.documentElement.style.setProperty('--display', 'block')设置为显示block否则 =>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" />

- dale landry

1

太棒了！使用z-index命令也是可能的吗？ - Alex

你为什么想要影响z-index？你希望以何种方式影响z-index？ - dale landry

1

这里没有必要使用z-index，但简单来说，您可以使用CSS变量设置和使用computedStyle获取任何CSS属性。 - dale landry

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- s.kuznetsov · Accepted Answer

这是使用规则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)');" />