title: How to set display property inline with !important
body: <p>I want to write an <strong>inline style</strong> viz <code>block !important</code> using javascript code. Code looks like this</p>
  
  <pre><code>element.style.display = 'block !important'; // This does not work (Approach 1)
  </code></pre>
  
  <p>However,</p>
  
  <pre><code>element.style = 'display:block !important'; // works perfectly (Approach 2)
  </code></pre>
  
  <p>But <strong>Approach 2 is not acceptable for the obvious reason it will over-ride earlier inline styles</strong>. You can see this in this <strong><a href="http://jsbin.com/IMiKahUD/2/edit?html,css,js,output" rel="nofollow">DEMO at Jsbin</a></strong></p>
  
  <p>Q1: How can I set <code>display: block !important</code> property using javascript and it has to be inline.</p>
  
  <p><strong>Q2: I want to know why Approach1 does not work ?</strong> </p>