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>
実際の例
Javascriptで「color:red !important;」を付けたい
!importantを多用すると混乱の元なので要注意です。