title: Change element display none back to default style value JS
body: <p>I have a function in JS that hides the element parsed:</p>
  
  <pre><code>function hide(id){
    document.getElementById(id).style.display = "none";
  }
  </code></pre>
  
  <p>How can I create a function that brings back the element to the default style value. For instance a div <code>display</code> property is <code>"block"</code> as for an image is <code>"inline-block"</code>, other elements are <code>"inline"</code> or lists are <code>"list-item"</code> How can I bring them back their default state?</p>
  
  <pre><code>function show(id){
    document.getElementById(id).style.display = "?????";
  }
  </code></pre>
  
  <p><strong>I know how to do it in Jquery but it is not an option.</strong></p>
  
  <p>In CSS there might be styles for the elements including <code>style:none</code>, which need to be overwritten to the default value.</p>
  
  <p>Since there is CSS in my example making <code>style.display = ''</code> eliminates the style added with JS but gets back to whatever style is added in CSS, I want to bring it back to its default value even before assigning styles with CSS.</p>
  
  <p>I tried this as it was suggested in a link in one of the comments:</p>
  
  <pre><code>elem = document.getElementById(id);
  var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("display");
  </code></pre>
  
  <p>but in this case <code>'theCSSprop'</code> returns <code>"none"</code> for a <code>div</code>, when I expect <code>"block"</code></p>
  
  <p>Any ideas?
  Thanks.</p>