如何用JavaScript实现按钮切换文本及样式并恢复原文本？

要解决无法恢复原始文本的问题，核心是提前保存元素的初始状态，每次点击时根据当前状态切换内容和样式。以下是修改后的完整代码：

完整代码 #

HTML #

<button type="button" onclick="myFunction()">Click here</button>
<p id="second">This is me</p>

JavaScript #

// 提前获取元素并保存原始状态
const targetElem = document.getElementById("second");
const originalContent = targetElem.innerHTML;
const originalFontSize = targetElem.style.fontSize;
const originalColor = targetElem.style.color;
let isChanged = false;

function myFunction() {
  if (!isChanged) {
    // 切换为修改后的内容与样式
    targetElem.innerHTML = "Hello Javascript";
    targetElem.style.fontSize = "25px";
    targetElem.style.color = "red";
    isChanged = true;
  } else {
    // 恢复为原始状态
    targetElem.innerHTML = originalContent;
    targetElem.style.fontSize = originalFontSize;
    targetElem.style.color = originalColor;
    isChanged = false;
  }
}

思路说明 #

• 先获取目标元素，一次性保存它的原始文本、字体大小和颜色，避免后续操作覆盖原始值导致无法恢复
• 用isChanged这个布尔变量标记当前元素是否处于修改后的状态
• 每次点击按钮时，根据isChanged的状态决定是应用修改后的样式文本，还是恢复到初始状态，同时更新标记变量

内容的提问来源于stack exchange，提问作者Nwaogu Eziuche