トップへ(mam-mam.net/)

Javascriptでエレメントにスタイルシートの!important付きで設定するには

検索:

「Javascriptでエレメントにスタイルシートの!important付きで設定するには」

Javascriptで

element.style.color = "red !important";

としても、エレメントにスタイルシートの!important付きで設定できない。
設定するには?

回答


element.style.cssText
を使えば設定できます。

ソース

<div class="fontRed">「color:red !important;」を付けたい</div>

<style>
  /* 黒色で!importantが設定されている */
  .fontRed{color:black !important;}
</style>
<script>
  let elm = document.querySelector(".fontRed");

  //以下は「color:black !important;」を打ち消せない
  elm.style.color = "red";

  //以下では「color:red !important」を設定できない
  elm.style.color = "red !important";

  //以下だと!importantが設定できる
  elm.style.cssText = elm.style.cssText + "color:red !important;";
</script>