我想做个“预告片警报”按钮

Question

我想做个“预告片警报”按钮。

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

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

不管怎样，这是我最好的结果。

​

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

​

但我真正想要的是这两种结果。(不是剧透/剧透)

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

有可能吗？

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

Answer 1

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

​

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 2

单击该按钮时，必须告诉javascript要更改哪个元素。我们可以告诉它更改一个span标记，但您可能有不止一个。所以我在上面放了一个叫“扰流板”的class。然后你可以这样做：

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

​

Answer 3

你就快到了！给出SPAN的ID：

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

然后将身体更改为新的ID

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