我想制作一个“剧透警报”按钮答案

【问题标题】：I want to make a 'Spoiler Alert' button我想制作一个“剧透警报”按钮
【发布时间】：2021-09-02 19:32:00
【问题描述】：

我想制作一个“剧透警报”按钮。

首先，我什么都不知道。真的很抱歉。

我这样做是因为我突然想这样做。

无论如何，这是我最好的结果。

<button id="change9">Spoiler Alert</button>

<script>

document.getElementById("change9").onclick = function(){
    document.body.style.color = '#ffffff';
}

</script>




<p>&nbsp;</p>

Not Spoiler 

<p>&nbsp;</p>

<span style="background-color:#000000;">Spoiler</span><br />

但我真正想要的是同时获得这两种结果。（不是剧透/剧透）

换句话说， ...跨度样式=“背景颜色：#000000；” ... 我想通过点击一个按钮来删除这部分。

有可能吗？

我一直在寻找它，但是只有一种方法可以改变整个背景颜色，而且我找不到更改文本背景颜色的方法。

【问题讨论】：

首先，我什么都不知道。说得好。这句话是宇宙中所有知识的基础。

标签： javascript html button background-color

【解决方案1】：

感谢你们，我得到了我想要的。谢谢。

document.querySelectorAll(".spoiler").forEach(function(btn) {
  btn.addEventListener('click', function(e) {
    this.classList.toggle('show');
  });
});

.spoiler {
  display: inline-block;
  background-color: #000000;
  cursor: pointer;
}

.spoiler.show {
  background: none;
}

Not Spoiler
<br/>
<span class="spoiler spoiler1">Spoiler</span><br />
<br/>
Another Not Spoiler
<br/>
<span class="spoiler spoiler2">Another Spoiler</span><br />

【讨论】：

【解决方案2】：

好吧，这是我的 sn-p：

<button id="change">Spoiler Alert</button>
<br><br>

<span>Not Spoiler</span>
<br><br>

<span class='spoiler' id='spoiled'>Spoiler</span>

.spoiler {
  display: none;
}

.show {
  display: inline-block;
  border: 1px solid red;
  text-align: center;
  padding: 2px 4px;
  color: red;
}

let btn = document.getElementById("change");
let spoilSpan = document.getElementById("spoiled");
btn.addEventListener("click", spoilerAlert);

function spoilerAlert() {
  spoilSpan.classList.toggle("show");
}

【讨论】：

【解决方案3】：

当您单击按钮时，您必须告诉 javascript 更改哪个元素。我们可以告诉它更改span 标签，但您可能有多个标签。所以我在上面放了一个class，叫做“spoiler”。然后你可以做这样的事情：

document.querySelector('.spoiler').style.color="#ffffff";

但是，使用 css 和类会更好（也更容易）。因此，我设置了一个名为“clicked”的类，现在我们只需将其添加到 span 中，如下所示：

document.querySelector('.spoiler').classList.add('clicked');

document.getElementById("change9").onclick = function(e) {
  document.querySelector('.spoiler').classList.add('clicked');
}

.spoiler {
  background: #000;
  color: #000;
  display: inline-block;
  padding: 5px;
}

.spoiler.clicked {
  background: #fff;
  color: #f00;
  border: 1px solid #f00;
}

<button id="change9">Spoiler Alert</button>
<p>&nbsp;</p>
Not Spoiler
<p>&nbsp;</p>
<span class='spoiler'>Spoiler</span><br />

【讨论】：

最好使用visibility: hidden隐藏剧透，而不是使文本颜色与背景相同。（除非您希望用户能够通过选择隐藏的文本来显示它。）
@jfd348 - 可见性：隐藏你看不到扰流板在哪里
@Jaromanda X 如果您希望背景保持可见，您可以使用嵌套在另一个跨度中的跨度，将背景颜色设置为外部跨度，将可见性设置为内部跨度。
@jfd348 - 谢谢。我完全错过了重点。固定
@jfd348 - 如果您的评论提到了这一点，我不会说什么：p

【解决方案4】：

这是一个充实的代码版本，它为每个扰流板处理多个扰流板警报按钮

document.querySelectorAll(".showspoiler").forEach(function(btn) {
  btn.addEventListener('click', function(e) {
    document.querySelector(`.${this.dataset.target}`).classList.toggle('show');
  });
});

.spoiler {
  color: #ffffff00;
  background-color: #000000;
}

.spoiler.show {
  color: #ffffffff;
}

<button class="showspoiler" data-target="spoiler1">Spoiler Alert</button>
<br/> Not Spoiler
<br/>
<span class="spoiler spoiler1">Spoiler</span><br />
<br/>
<button class="showspoiler" data-target="spoiler2">Spoiler Alert</button>
<br/> Another Not Spoiler
<br/>
<span class="spoiler spoiler2">Another Spoiler</span><br />

虽然 - 我做的方式不同，我不会有按钮，我只是点击扰流板本身

document.querySelectorAll(".spoiler").forEach(function(btn) {
  btn.addEventListener('click', function(e) {
    this.classList.toggle('show');
  });
});

.spoiler {
  color: #ffffff00;
  background-color: #000000;
  cursor: pointer;
}

.spoiler.show {
  color: #ffffffff;
}

Not Spoiler
<br/>
<span class="spoiler spoiler1">Spoiler</span><br />
<br/>
Another Not Spoiler
<br/>
<span class="spoiler spoiler2">Another Spoiler</span><br />

【讨论】：

【解决方案5】：

你已经接近了！为 SPAN 提供一个 ID：

<span id="myspoiler" style="background-color:#000000;">Spoiler</span>

然后将 body 更改为您的新 ID

document.getElementById("myspoiler").style.color = '#ffffff';

【讨论】：