title: Changing the Style Attributes in javascript use className
body: <p>HTML</p>
  
  <pre><code>&lt;h1&gt;Changing the Style&lt;/h1&gt;
  &lt;p&gt;JavaScript can change the style of an HTML element.&lt;/p&gt;
  
  &lt;button type="button" onclick="openMe()"&gt;Open!&lt;/button&gt;
  &lt;button type="button" onclick="closeMe()"&gt;Close!&lt;/button&gt;
  
  &lt;p id="demo"&gt;Extra details...You can open and close this paragraph using the buttons above.&lt;/p&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.close {
      display: none;
  }
  .open {
      display: block;
  }
  
  button {
      width:150px;
      background-color: #00CCEE;
      margin-left:15px;
      font-size:120%;
  }
  
  #demo {
      color:white;
      background-color: #7F7F7F;
      padding:10px;
      font-size:120%
  }
  </code></pre>
  
  <p>JAVASCRIPT</p>
  
  <pre><code>function closeMe(){
      x=document.getElementById("demo");
      x.className="close";
  }
  
  function openMe(){
      x=document.getElementById("demo");
      x.className="open";
  }
  </code></pre>
  
  <p>Can I use Like <code>x.IdName= "close";</code> In Javascript?</p>
  
  <p>So far I know there are two ways to change style attributes using Javascript.</p>
  
  <pre><code>x = document.getElementById("demo");
  </code></pre>
  
  <ol>
  <li>directly  eg.. (<code>x.style.backgroundColor ="red"</code>;</li>
  <li><p>by Class name eg..  (<code>x.className="abc";</code>) </p>
  
  <p>for using class name we do use:</p>
  
  <pre><code>x = document.getElementById("demo");
  x.className="abc";
  </code></pre>
  
  <p>My questions:</p></li>
  </ol>
  
  <p>Can I use Id to change style attributes insted of useing className? if yes Please show.</p>
  
  <p>Can I call "x" <code>{x=document.getElementById("demo");}</code> a variable?</p>