CODEWITHSUNDEEP
javascript
colinjcason
colinjcason

Reputation: 21

how to reset a div to its original style with javascript

I am trying to "reset" box after several changes to its original state in javascript. I have used several addEventListener methods to change the appearance of a box in HTML, but am having trouble using a "reset" button to revert the box to its original appearance.

document.getElementById('button1').addEventListener('click', function(){

  document.getElementById('box').style.height = '250px';

});

document.getElementById('button2').addEventListener('click', function(){

  document.getElementById('box').style.background = 'blue';

});

document.getElementById('button3').addEventListener('click', function(){

  document.getElementById('box').style.opacity = '0.1';

});

// This is where i need to reset the box

document.getElementById('button4').addEventListener('click', function(){

Upvotes: 1

Views: 4797

Answers (6)

Matthew Lemke
Matthew Lemke

Reputation: 151

use an onclick to override your listeners. Like this:

document.getElementById("button4").onclick = function(){

 document.getElementById("box").style.height = "150px";

  document.getElementById("box").style.backgroundColor = "Orange";

   document.getElementById("box").style.opacity = "100";
 };

Upvotes: 0

Nicolas Opalski
Nicolas Opalski

Reputation: 67

Straight from MDN:

A style declaration is reset by setting it to null or an empty string

So given your current code, this should do the trick. You will just need to keep track of what specific styles you changed so you can make sure you reset it.

document.getElementById('button4').addEventListener('click', function(){
    document.getElementById('box').style.height = null;
    document.getElementById('box').style.background = null;
    document.getElementById('box').style.opacity = null;
}

Edit: Kirbee's answer is probably better unless there are other inline styles that you want to be preserved because using their solution you don't have to keep track of all the styles you need to reset. Additionally, if the original styles are defined as inline styles and not in a CSS file, my solution will not work. If that is the case, you would need to do something where you store the original values in a global variable and then use that variable when resetting the styles.

Upvotes: 3

Bibberty
Bibberty

Reputation: 4768

Here this will work.

const el = document.querySelector('.base');
document.addEventListener('click', ({
  target
}) => {
  if (target.matches('#btn1')) {
    el.classList.add('style1');
  }

  if (target.matches('#btn2')) {
    el.classList.add('style2');
  }

  if (target.matches('#btn3')) {
    el.classList.add('style3');
  }

  if (target.matches('#btn4')) {
   el.classList.remove('style1', 'style2', 'style3');
   el.classList.add('base');
  }

});
.base {
  border: 1px solid red;
}

.style1 {
  border: 1px solid blue;
}

.style2 {
  font-weight: bold;
}

.style3 {
  color: green;
}
<div class="base">Test Div
  <div>
    <div>
      <button id="btn1">Button 1</button>
      <button id="btn2">Button 2</button>
      <button id="btn3">Button 3</button>
      <button id="btn4">Button 4 - Reset</button>
    </div>

Upvotes: 0

PythonProgrammi
PythonProgrammi

Reputation: 23443

<html>
    <body>
    <div id='box'>Hello
    </div>
    <button id="button1">1 height</button>
    <button id="button2">2 bg</button>
    <button id="button3">3 opacity</button>
    <button id="button4">4 reset</button>
    <script type="text/javascript">
    
    box = document.getElementById('box');
    b1 = document.getElementById('button1');
    b2 = document.getElementById('button2');
    b3 = document.getElementById('button3');
    b4 = document.getElementById('button4');
    
    b1.addEventListener('click', 
    	function(){
      		box.style.height = '100px';
    	});
    
    b2.addEventListener('click',
    	function(){
    	  box.style.background = 'blue';
    	});
    
    b3.addEventListener('click',
    	function(){
    	  box.style.opacity = '0.1';
    });
    
    // This is where i need to reset the box
    
    b4.addEventListener('click', function(){
    	box.style = "";
    });
    </script>
    </body>
    </html>

Upvotes: 0

KimDDuShi
KimDDuShi

Reputation: 58

var naturalHeight = document.getElementById('box').style.height;

Use var like this from beginning and load this value when you press the button.

Upvotes: 1

KLP
KLP

Reputation: 433

If all your styles are going to be appended inline as above, I would just use setAttribute on the element in question to remove all the styles:

document.getElementById('box').setAttribute('style', '');

Though, as another user has mentioned, adding and removing classes is probably a preferable way to do this for maintainability and readability.

Upvotes: 2

Related Questions