How to reset an HTML element to its first/initial value in JavaScript?

Question

I am attempting to reset an element, through JavaScript, to the value that was first specified in the HTML/CSS files, while avoiding "hard-coding" the value. The purpose is making a script that toggles a specific style value between 0 and its "initial" value.

For example: A div starts out with 20 pixels of padding (defined by its class or manually through setting the style). When pressing a button, that padding is set to 0. When pressing the button again, the padding would go back to 20 pixels of padding.

However, I want this function to be generic, so it should work with other elements that have 30px of padding, or 50px, etc.

Is this possible? And if so, how? (ideally, without running a script at page load that makes a backup of all initial values)

Answer 1 · 2025-11-14 17:49:51Z

I think it is possible. This is the basic implementation. It can be more versatile if we add more parameters for future use.

const toggle = document.querySelector("#toggle")
const padding = document.querySelector(".div")

// 252 : "padding-block-end"
// 253 : "padding-block-start"
// 254 : "padding-bottom"
// 255 : "padding-inline-end"
// 256 : "padding-inline-start"
// 257 : "padding-left"
// 258 : "padding-right"
// 259 : "padding-top"

const customPadding = (button,element,incrementValue) => {
  const styles = getComputedStyle(element)
  
  const padding = styles.getPropertyValue("padding-block-end")
  // get value before update 

  let buttonState;
  button.addEventListener("click", () => {
    buttonState = !buttonState
    element.style.padding = buttonState ? `${incrementValue}px` : padding
  })
  
}
customPadding(toggle,padding,0)

Answer 2 · 2025-11-14 18:39:42Z

One approach could be to style the element according to a checkbox (or some other input element that changes state):

.box {
  width: 30px;
  height: 30px;
  border: solid thick black;
}

.inner {
  background-color: orange;
  aspect-ratio: 1;
}

.style01 {
  padding: 10px;
}

label:has(input:checked) + .box {
  padding: 0;
}

input {
  display: none;
}

input:checked + button {
  color: orange;
}

button {
  pointer-events: none;
  font-weight: bold;
}

<label><input type="checkbox"><button type="button">test</button></label>
<div class="box style01">
  <div class="inner"></div>
</div>

Another would be to toggle a class name using JavaScript:

document.querySelector('button').addEventListener('click', e => {
  let id = e.target.dataset.id;
  document.getElementById(id).classList.toggle('override');
});

.box {
  width: 30px;
  height: 30px;
  border: solid thick black;
}

.inner {
  background-color: orange;
  aspect-ratio: 1;
}

.style01 {
  padding: 10px;
}

.override {
  padding: 0;
}

button {
  font-weight: bold;
}

<label><button data-id="box01" type="button">test</button></label>
<div id="box01" class="box style01">
  <div class="inner"></div>
</div>

Answer 3 · 2025-11-15 16:27:45Z

If padding is already set within a css class, resetting it is as simple as [element].style.padding = "".

If padding is set inline or set using js, the initial padding state must be stored within the element to be able to set it back to its original state. Best way to do that is using a data-attribute.

Here is a snippet to demonstrate 3 different situations:

document.addEventListener(`click`, handle);

const second = document.querySelector(`#second`);
second.style.padding = `7px`;
// store this padding
second.dataset.initialPadding = second.style.padding;

function handle(evt) {
  if (evt.target.dataset?.forId) {
    const relatedElem = document.querySelector(evt.target.dataset.forId);
    return relatedElem.style.padding = getComputedStyle(relatedElem).padding === `0px`
      ? relatedElem.dataset.initialPadding ?? `` : `0px`;
  }
}

.initial1 {
  border: 1px solid #999;
  padding: 5px;
  width: 20px;
  height: 20px;
  margin: 0.2em 0;
  &:after {
    content: " ";
    background-color: green;
    width: 100%;
    height: 100%;
    display: inline-block;
  }
}

.initial2 {
  border: 1px solid #999;
  width: 20px;
  height: 20px;
  margin: 0.2em 0;
  &:after {
    content: " ";
    background-color: orange;
    width: 100%;
    height: 100%;
    display: inline-block;
  }
}

.initial3 { /* no initial padding */
  border: 1px solid #999;
  width: 20px;
  height: 20px;
  margin: 0.2em 0;
  &:after {
    content: " ";
    background-color: red;
    width: 100%;
    height: 100%;
    display: inline-block;
  }
}

h4 {
  margin: 0.3em 0 0.2em 0;
}

<button data-for-id="#first">toggle padding #1</button>
<button data-for-id="#second">toggle padding #2</button>
<button data-for-id="#third">toggle padding #3</button>
<h4>Padding in css class ".initial1"</h4>
<div id="first" class="initial1"></div>
<h4>Padding set through js</h4>
<div id="second" class="initial2"></div>
<h4>Padding inline</h4>
<div id="third" class="initial3" 
  data-initial-padding="8px"
  style="padding: 8px"></div>

Collectives™ on Stack Overflow

How to reset an HTML element to its first/initial value in JavaScript?

3 Replies 3

Your Reply

Collectives™ on Stack Overflow

How to reset an HTML element to its first/initial value in JavaScript?

3 Replies 3

Your Reply

Sign up or log in

Post as a guest