Javascriptで要素に!important付きでCSSを設定する

Javascriptで要素に!important付きでCSSを設定

以下のようなHTMLとCSSがある場合「div.fontBlack」要素にJavascriptから
document.querySelector("div.fontBlack").style.color="red";
としてもCSSに!importantがあるので文字を赤色にすることができない。

<div class="fontBlack">Javascriptで「color:red !important;」を付けたい</div>
<style>
  /* 黒色で!importantが設定されている */
  .fontBlack{color:black !important;}
</style>

このような場合はJavascriptから
要素.style.cssText="color:red !important;";
とすれば赤色に設定することができる。

<div class="fontBlack">Javascriptで「color:red !important;」を付けたい</div>
<style>
  /* 黒色で!importantが設定されている */
  .fontBlack{color:black !important;}
</style>
<script>
  document.querySelector("div.fontBlack").style.cssText="color:red !important;";
</script>