title: get value from css using document.getElementById().style.height javascript
body: <p>Please offer insight into this mystery.</p>
  
  <p>I am trying to get the height value from a div box by </p>
  
  <pre><code>var high = document.getElementById("hintdiv").style.height; 
  alert(high);
  </code></pre>
  
  <p>I can get this value just fine if the attribute is contained within the div tag, but it returns a blank value if the attribute is defined in the css section.</p>
  
  <p>This is fine, it shows 100px as a value.  The value can be accessed.</p>
  
  <pre><code>&lt;div id="hintdiv" style="height:100px; display: none;"&gt;
  .
  .
  var high = document.getElementById("hintdiv").style.height; 
      alert(high); 
  </code></pre>
  
  <p>This is not fine, it shows an empty alert screen.  The value is practically 0.</p>
  
  <pre><code>#hintdiv
  {
  height:100px
  display: none; 
  }
  
  &lt;div id="hintdiv"&gt;
  .
  .
  var high = document.getElementById("hintdiv").style.height; 
      alert(high); 
  </code></pre>
  
  <p>But I have no problem accessing/changing the "display:none" attribute whether it is in the tag or in the css section.  The div box displays correctly by both attribute definition methods (inside the tag or in the css section).  </p>
  
  <p>I also tried to access the value by other variations, but no luck</p>
  
  <pre><code>document.getElementById("hintdiv").style.height.value  ----&gt; undefined
  document.getElementById("hintdiv").height ----&gt;undefined
  document.getElementById("hintdiv").height.value  ----&gt; error, no execution
  </code></pre>
  
  <p>Any solution?</p>
  
  <p>TIA.</p>