javascript - HTML + Javascript 按钮再次单击可撤消

标签 javascript html

我想知道如何让按钮在单击后也撤消某些操作。在我的场景中,只是简单地格式化文本(颜色、大小等),当您第一次单击它时,它会按照 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>

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

最佳答案

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

关于javascript - HTML + Javascript 按钮再次单击可撤消,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55147410/

相关文章:

javascript - 无法使用 Materialize CSS 框架生成下拉菜单

javascript - 使用 javascript 和 CSS 将一本书分页并将所有内容放在一页上

javascript - 我在 javascript 中执行 setTimeout 加载符号?

html - 额外的 <div> 包装器的目的是什么?

javascript - 对象窗口 ['0' ] 和窗口 ['1' ] 在 javascript 中的含义是什么

javascript - 输入时调用按钮功能

javascript - 如何在没有iframe的情况下在ionic div中加载外部url

javascript - 将 0 转换为 0.00 作为数字

javascript - 所见即所得 JavaScript HTML 编辑器,具有 API 和高级文本处理支持(如单词检测)

HTML CSS - 如何将按钮放在我页面的中心