title: How to retrieve the display property of a DOM element?
body: <pre><code>&lt;html&gt;
      &lt;style type="text/css"&gt;
          a {
              display: none;
          }
      &lt;/style&gt;
      &lt;body&gt;
          &lt;p id="p"&gt; a paragraph &lt;/p&gt;
          &lt;a href="http://www.google.com" id="a"&gt;google&lt;/a&gt;
      &lt;/body&gt;
      &lt;script type="text/javascript"&gt;
          var a = (document.getElementById('a')).style;
          alert(a.display);
          var p = (document.getElementById('p')).style;
          alert(p.display);
          p.display = 'none';
          alert(p.display);
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The first and the second <code>alert</code> display nothing other than a empty string, which I thought should be <code>none</code> and <code>block</code>.
  However after the intensionally <code>display</code> setting, the third <code>alert</code> finally alert <code>none</code>.</p>
  
  <p>But Why? How could I retrieve the <code>display</code> property correctly?</p>
  
  <p>Thanks.</p>