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? — Michael M.
– Michael M., Commented Oct 29, 2022 at 15:03

Konrad · Accepted Answer · 2022-10-29 18:08:14Z

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, 2022 at 18:08

answered Oct 29, 2022 at 15:01

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

perrytrademark Over a year ago

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

Konrad Over a year ago

Use setTimeout

perrytrademark Over a year ago

Yep tried that already with no luck! I will try more! Thanks again!

Shahed · Accepted Answer · 2022-10-29 15:30:15Z

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, 2022 at 15:30

Shahed

2,1007 silver badges24 bronze badges

1 Comment

perrytrademark Over a year ago

Thanks a lot for the answer, im trying to implement setTimeout to that so that the styles revert to default automatically but i fail

Collectives™ on Stack Overflow

Javascript Auto Reset CSS Styles

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related