js 元素复原

<form id="myForm">
  <input type="text" name="username" value="初始值">
  <button type="button" onclick="resetForm()">重置</button>
</form>

<script>
function resetForm() {
  document.getElementById('myForm').reset();
}
</script>

<div id="myElement" style="color: red;">改变我</div>
<button type="button" onclick="restoreElement()">复原</button>

<script>
let originalColor = document.getElementById('myElement').style.color;

function restoreElement() {
  document.getElementById('myElement').style.color = originalColor;
}
</script>

<div id="myElement" class="original-state">改变我</div>
<button type="button" onclick="toggleState()">切换状态</button>

<style>
.original-state { color: red; }
.changed-state { color: blue; }
</style>

<script>
function toggleState() {
  const element = document.getElementById('myElement');
  if (element.classList.contains('original-state')) {
    element.classList.remove('original-state');
    element.classList.add('changed-state');
  } else {
    element.classList.remove('changed-state');
    element.classList.add('original-state');
  }
}
</script>