title: Adding !important within a dynamically written stylesheet for Internet Explorer
body: <p>I have been experimenting with using javascript to dynamically write stylesheets. In Firefox, one can use the <code>setProperty</code> method on the style for the <code>cssRules</code> of the <code>styleSheets</code>, like...</p>
  
  <pre><code>document.styleSheets[0].cssRules[0].style
    .setProperty(propertyName, propertyValue, 'important');
  </code></pre>
  
  <p>...to set the <code>!important</code> flag on the style. I have not found an equivalent for this in Internet Explorer (the <code>setAttribute</code> method does not have such an option for setting the <code>!important</code> flag on a style). Some experimentation found that for exact styles, such as <code>border-top-width,</code> I can rewrite the <code>cssText</code> string to add the <code>!important</code>, but then I discovered that if you individually set all the borders, IE rewrites the actual rule to be a short hand form, so it rewrites to <code>border-top</code>, <code>border-right</code>, etc., and each gets set, but without the <code>!important</code> flag. Further, if I explicitly set it via the short hand form, it <strong>does not</strong> accept a rewrite of the <code>cssText</code> to take the <code>!important</code> flag.</p>
  
  <p>So the question is, does anyone know of a way, when dynamically writing styles to a <code>styleSheets</code> rule, to get IE to consistently set the <code>!important</code> flag for that rule?</p>
  
  <p>Thanks for your help,</p>
  
  <p>Scott</p>