I want an easy way to revert an element to its original display setting

[aarongustafson]

If you are building toggles (or similar interfaces) you often need to make adjustments to an element’s display property. Often this requires tracking the element’s initial CSS display value before setting it to "none" so you can switch it back later. It would be nice to have a mechanism by which you could reset an element’s display property (and potentially other properties) without having to know what the original setting was.

---

https://webwewant.fyi/wants/72/

[miragecraft]

CSS has the "revert" keyword.

[captainbrosset]

I can't really think of something that needs to be added here.
I can see 3 cases:

1. The display is changed in CSS, by applying a class.
   In this case, just removing the class will revert to the previously applied display value.

2. The display is changed in JS, to an element that has its display property set from CSS.
   Imagine a <div class="foo"> with a CSS rule applied to it .foo { display: inline; }.
   In this case, if you change the display from JS with div.style.display = 'none'; then you can just revert this by doing div.style.display = ''; and the display value will go back to whatever was defined in the CSS rule.

3. The display is changed in JS, to an element that already has its initial display value set as an inline style.
   Imagine a node like <div style="display:inline"> and then doing div.style.display = 'none';.
   By doing this, you are setting the value of a property to something else. Remembering what the previous value of this property was doesn't sound like something we'd want to add to JavaScript.
   If you had a JS object like const foo = { bar: 1 } and then did foo.bar = 2;, you wouldn't expect to be able to use a feature that reverts this, right?