How to remove CSS Property using javascript?

#javascript #webdev

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  background-color: coral;
  border: 1px solid;
  padding: 50px;
  color: white;
}
</style>
</head>
<body>

<div id="myDIV">This div element has an onmousemove event handler that displays a random number every time you move your mouse inside this orange field.
  <p>Click the button to change the color of text.</p>
  <button onclick="removeHandler()" id="myBtn">Try it</button>
</div>

<h1 id="demo">Hello everyone</h1>

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
  document.getElementById("demo").style.color = "green";
}

function removeHandler() {
  document.getElementById("demo").style.removeProperty('color');
}
</script>
</body>
</html>

OUTPUT:

1.) Without Click ‘Try It’ button text is ‘green’:

2.) After Click the button remove property call and removes the previous css property of text:

To learn from each other keep sharing and learning!
follow me on Twitter also I post my daily learning and work on Twitter.
https://twitter.com/tk22O9

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site