我想做一个剧透警报按钮 [英] I want to make a 'Spoiler Alert' button

问题描述

我想创建一个"剧透警报"按钮。

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

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

不管怎样，这是我的最好成绩。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

<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=&Q；背景颜色：#000000；&Q；... 我想通过单击按钮删除此部件。

可以吗？

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

推荐答案

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

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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

不过--我做这件事的方式不同，我不会有按钮，我只需点击扰流板本身

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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

这篇关于我想做一个剧透警报按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！