HTML+；Javascript按钮再次单击以撤消

我想知道怎么可能让按钮在点击后也撤销一些东西。在我的场景中，只需对文本进行简单的格式化（颜色、大小等），当您第一次单击它时，它会按照Javascript中的描述对文本进行格式化，但我想添加一个函数，当您再次单击它时，它会撤销该功能

`<script>    
function myFunction(){    
  document.getElementById("demo").style.fontsize="25px";
  document.getElementById("demo").style.color="#3AF702";
  document.getElementById("demo").style.backgroundcolor="red";    
}    
</script>`

<button type="change" onclick="myFunction()">Change!</button>

`
函数myFunction（）{
document.getElementById（“demo”）.style.fontsize=“25px”；
document.getElementById（“demo”）.style.color=“#3AF702”；
document.getElementById（“demo”）.style.backgroundcolor=“红色”；
}    
`
改变

我已经检查了其他文章，这些似乎是相关的，但我没有从中得到任何聪明的东西，所以如果这是一个dup，我提前道歉，并感谢您的帮助

<script>    
var flag = true;
function myFunction(){
  let el = document.getElementById("demo");
  el.style.fontsize = flag ? "25px" : "";
  el.style.color= flag ? "#3AF702" : "";
  el.style.backgroundcolor=flag ? "red" : "";   
  flag = !flag; 
}    
</script>`

<button type="change" onclick="myFunction()">Change!</button>

var标志=真；
函数myFunction（）{
让el=document.getElementById（“demo”）；
el.style.fontsize=标志？“25px”：“；
el.style.color=flag？#3AF702:“；
el.style.backgroundcolor=旗帜？“红色”：“；
flag=！flag；
}    
`
改变

创建一个存储按钮初始值的对象和一个保存按钮状态的变量

var state = 0;
var backup = {};
backup.fontSize = document.getElementById("demo").style.fontsize;
backup.color = document.getElementById("demo").style.color;
backup.background = document.getElementById("demo").style.backgroundcolor;

现在，您可以轻松地在备份和新值之间切换，如下所示：

function myFunction() {
  if (state == 0) {
    document.getElementById("demo").style.fontsize = "25px";
    document.getElementById("demo").style.color = "#3AF702";
    document.getElementById("demo").style.backgroundcolor = "red";
    state = 1;
  } else {
    document.getElementById("demo").style.fontsize = backup.fontSize;
    document.getElementById("demo").style.color = backup.color;
    document.getElementById("demo").style.backgroundcolor = backup.background;
    state = 0;
  }
}

函数myFunction（）{
demo.className=demo.className？”：“样式”
}

.style{
字体大小：25px；
颜色：红色；
背景：蓝色；
}

你好

---

改变最简单的方法是添加和删除类

.改变{
字体大小：25px；
颜色：#3AF702；
背景色=“红色”
}
var x=0；
函数myFunction（）{
如果（x==0）{
document.getElementById（“演示”）.classList.add（“更改”）；
x=1；
}否则{
document.getElementById（“demo”）.classList.remove（“更改”）；
x=0；
}
}
改变更改前将旧配置保存在对象/本地存储器中。单击按钮时再次设置它们。在您的功能中，在执行任何其他操作之前，请检查按钮的当前颜色（和/或任何其他属性）。如果它当前已经是您要将其更改为上面的值，则再次更改它。（当然，如果之前的值是不可预测的/硬编码的，那么您必须事先存储与相关按钮相关的旧值。）如果它不是您要将其更改为的值，则改为该值。应该是一个简单的
if/else
块。感谢您这么快的响应。我想我必须在这里澄清一些事情。所以文本在点击按钮之前没有格式，点击之后变成了上面的内容，现在我想知道如何使按钮基本上有两个功能。第一次单击，更改为格式X，第二次单击应撤消该更改。您不需要两个函数，您需要一个函数来检查现有值并做出决定-正如我已经描述的。是的，抱歉，仍然是初学者：）在看到下面的代码后，您的答案现在也有意义了！谢谢只要按钮没有需要添加的其他类，这就可以正常工作……JS中的元素上没有“addClass”或“removeClass”之类的函数。您是否对jQuery函数感到困惑？很抱歉。我太习惯jQuery了。JavaScript确实可以通过
element.classList.add（“myclass”）添加类。我将编辑我的答案。这是一个有效的解决方案，仍然需要检查其他：）这就是我真正想要的！！非常感谢：）现在是时候了解它了，哈哈，但它看起来非常先进tho@Ochitsuku我猜你可能指的是
？…：
位？这就是所谓的
三元运算符
，它只是
if/else
的简写。如果你在谷歌上搜索“三元操作符javascript”，你可以了解它。这同样有效，但在我看来比Garry man的答案更复杂。可能是因为我不熟悉中的“var”和备份JS@Ochitsuku“var”只是声明了一个变量。这里的“备份”并不是一个特殊的概念，它只是一个变量的名称。没什么好怕的。
function myFunction() {
  if (state == 0) {
    document.getElementById("demo").style.fontsize = "25px";
    document.getElementById("demo").style.color = "#3AF702";
    document.getElementById("demo").style.backgroundcolor = "red";
    state = 1;
  } else {
    document.getElementById("demo").style.fontsize = backup.fontSize;
    document.getElementById("demo").style.color = backup.color;
    document.getElementById("demo").style.backgroundcolor = backup.background;
    state = 0;
  }
}