Javascript Auto Reset CSS Styles

Question

I have a button that changes an element's style. Can I have this button auto-reset the CSS changed, back to default? Here is the code:

<div class="coinboxcontainer"><img id="coin1" src="/wp-content/uploads/2022/10/coin.png" alt="box" width="40" height="40">
<a onclick="tosscoin()"><img src="/wp-content/uploads/2022/10/coinbox.png" alt="box" width="40" height="40"></a>
<audio id="audio" src="/wp-content/uploads/2022/10/coinsound.mp3"></audio>
<script>
function tosscoin() {
       document.getElementById("coin1").style.transform = "translatey(-70px)";
       var audio = document.getElementById("audio");
       audio.play();
}
</script>
</div>

Does this answer your question? [How to reset the style properties to their CSS defaults in javascript?](https://stackoverflow.com/questions/3506050/how-to-reset-the-style-properties-to-their-css-defaults-in-javascript) — Michael M., Oct 29 '22 at 15:03

Konrad · Accepted Answer · 2022-10-29T18:08:14.317

0

This should remove all styles from that element:

document.getElementById("coin1").style.cssText = null

Resetting styles after some time

const button = document.querySelector('button')

button.addEventListener('click', () => {
  button.style.transform = `translate(${100}px)`
  setTimeout(() => button.style.cssText = null, 1000)
})

<button>click me</button>

edited Oct 29 '22 at 18:08

answered Oct 29 '22 at 15:01

Konrad

21,590
4
28
64

Thanks a lot for the answer! Though i am looking for a way to do that automatically.. for example after 2 seconds after pressing the button, the styles revert back to normal. Thanks again for your time – perrytrademark Oct 29 '22 at 17:29
Use `setTimeout` – Konrad Oct 29 '22 at 17:31
Yep tried that already with no luck! I will try more! Thanks again! – perrytrademark Oct 29 '22 at 18:03

score 0 · Answer 2 · answered Oct 29 '22 at 15:30

0

To remove css styles from an element using js Removes all styles.

document.getElementwithSomeMethod.style=null
document.getElementwithSomeMethod.style.cssText=null

Remove a single style

document.getElementBySomeMethod.style.removeProperty(propertyName)

answered Oct 29 '22 at 15:30

Mohammed Shahed

840
2
15

Thanks a lot for the answer, im trying to implement setTimeout to that so that the styles revert to default automatically but i fail – perrytrademark Oct 29 '22 at 18:05

Javascript Auto Reset CSS Styles

2 Answers2