title: Cannot overwrite !important style with javascript on desktop browsers
body: <p>I need to rewrite the <code>display: none !important;</code>
  for <code>display: block;</code> with javascript</p>
  <p>I'm using this code below, but it has only worked on mobile browsers</p>
  <pre><code>document.getElementById('billing_state_field').style.setProperty(&quot;display&quot;, &quot;block&quot;, &quot;important&quot;);
  </code></pre>
  <p>For some reason in Google Chrome and Firefox the style has not changed</p>
  <p>This is the page I'm trying to change.
  <a href="https://vegazcomm.com/finalizar-compra/" rel="nofollow noreferrer">https://vegazcomm.com/finalizar-compra/</a></p>
  <p>(You may need to add an item to the cart and click buy to reach the page)</p>
  <p>The idea of ​​the code is to make the address fields appear only after the user touches the Post Code input</p>
  <p>To make the fields disappear I had to use <code>display: none! Important;</code> on css and overwrite with JS.</p>
  <p>The complete code is here</p>
  <pre><code>&lt;script&gt;
  
  
  window.onload = function(){
      document.getElementById('billing_postcode').onclick = function(){
      //console.log('Hello world');
     
  document.getElementById('billing_address_1_field').style.setProperty(&quot;display&quot;, &quot;block&quot;, &quot;important&quot;);
  
  document.getElementById('billing_address_2_field').style.setProperty(&quot;display&quot;, &quot;block&quot;, &quot;important&quot;);
  
  document.getElementById('billing_billing_number_field').style.setProperty(&quot;display&quot;, &quot;block&quot;, &quot;important&quot;);
  
  document.getElementById('billing_city_field').style.setProperty(&quot;display&quot;, &quot;block&quot;, &quot;important&quot;);
  
  document.getElementById('billing_state_field').style.setProperty(&quot;display&quot;, &quot;block&quot;, &quot;important&quot;);
    }
  }
  
  
  &lt;/script&gt;
  </code></pre>