我想制作一个 'Spoiler Alert' 按钮

Question

我想制作一个'Spoiler Alert'按钮。

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

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

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

<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 />

但我真正想要的是两个结果。（不是 Spoiler/Spoiler）

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

可能吗？

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

Answer 1

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

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

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

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 />

Answer 2

你很接近！为 SPAN 提供 ID：

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

然后将正文更改为您的新 ID

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

Answer 3

这是处理每个剧透的多个剧透警报按钮的代码的充实版本

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 />

Answer 4

嗯，这是我的片段：

<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");
}

Answer 5

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

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 />

我想制作一个 'Spoiler Alert' 按钮

I want to make a 'Spoiler Alert' button

javascript

html

button

background-color