title: What does "display.style" do in JavaScript?
body: <p>I was practising toggle switch function....</p>
  
  <p><strong>FULL HTML CODE</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;style&gt;
  #myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
    display="block"
  
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;p&gt;Click the "Try it" button to toggle between hiding and showing the DIV element:&lt;/p&gt;
  
  &lt;button onclick="myFunction()"&gt;Try it&lt;/button&gt;
  
  &lt;div id="myDIV"&gt;
  This is my DIV element.
  &lt;/div&gt;
  
  &lt;p&gt;&lt;b&gt;Note:&lt;/b&gt; The element will not take up any space when the display property set to "none".&lt;/p&gt;
  
  &lt;script&gt;
  function myFunction() {
  
  if (myDIV.style.display == "block") {
      myDIV.style.display = "none";
  } else {
      myDIV.style.display = "block";
    }
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In order for the div element to disappear, I have to click it twice (only when the page first loads). I was able to fix it by setting the <strong>CSS display</strong> to <code>none;</code> instead of `block;*. What might be causing this?</p>
  
  <p>Also, I've realized that having <strong>===</strong> or <strong>==</strong> or <strong>=</strong> sign after <code>myDIV.style.display</code> causes different results. I was wondering why that is?</p>
  
  <p>p.s. The original content I was experimenting is this: <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_hide_show" rel="nofollow noreferrer">https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_hide_show</a></p>