点击按钮修改元素display、颜色及input值，如何点击同一按钮还原所有状态？

Hey there! Let's break down how to implement this toggle functionality—clicking a button to modify an element's display property, color, and an input's value, then clicking it again to revert everything back to the original state.

Step 1: Set Up the HTML Structure #

First, let's create the basic elements we need: a button, a target element to modify, and an input field.

<button id="toggleBtn">Toggle States</button>
<div id="targetElement">This is the element we'll modify!</div>
<input id="targetInput" type="text" value="Original Input Value">

Step 2: Add Basic CSS (Optional but Useful) #

Just to make the state changes more visible, let's add some default styling:

#targetElement {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #ccc;
}

Step 3: Implement the JavaScript Logic #

The core idea here is to save the initial state of all elements first, then toggle between the modified state and the original state on each button click.

// Get references to our elements
const toggleBtn = document.getElementById('toggleBtn');
const targetElement = document.getElementById('targetElement');
const targetInput = document.getElementById('targetInput');

// Save initial states so we can revert later
const initialStates = {
  elementDisplay: targetElement.style.display || window.getComputedStyle(targetElement).display,
  elementColor: targetElement.style.color || window.getComputedStyle(targetElement).color,
  inputValue: targetInput.value
};

// Track whether we're in the modified state
let isModified = false;

// Add click event listener to the button
toggleBtn.addEventListener('click', () => {
  if (!isModified) {
    // Apply modified states
    targetElement.style.display = 'block'; // Replace with your desired display value
    targetElement.style.color = '#ff0000'; // Replace with your desired color
    targetInput.value = 'Modified Input Value'; // Replace with your desired input value
    isModified = true;
  } else {
    // Revert to initial states
    targetElement.style.display = initialStates.elementDisplay;
    targetElement.style.color = initialStates.elementColor;
    targetInput.value = initialStates.inputValue;
    isModified = false;
  }
});

How This Works #

• Saving Initial States: We use window.getComputedStyle() to grab the actual applied styles (critical if the element's styles come from CSS classes instead of inline styles), and store the input's initial value directly.
• Toggle Tracking: The isModified boolean keeps track of which state we're in. On each click, we either apply the custom styles/value or revert back to the saved original state.
• Flexibility: You can easily tweak the modified values (like changing display to none, color to #00ff00, or the input value to anything else) to match your exact needs.

Quick Tip for Class-Based Styling #

If your target element's display/color is controlled by CSS classes instead of inline styles, you can toggle the class instead of modifying the style property directly. This is cleaner for more complex styling:

// Replace the style modifications with class toggles
targetElement.classList.toggle('modified-class');

内容的提问来源于stack exchange，提问作者Dan Onejump