jQueryを使って!important指定されたCSSスタイルを上書きする方法

display: none !important 指定のされた要素に対し、jQueryのshowメソッドで表示処理をかけようとしたところ、一筋縄ではいかなかったので解決方法を備忘録としてまとめておく。

まず、対象要素のクラスには以下のようなCSSがあてられている。

.hide {
  display: none !important;
}

このhideクラスに対し、まずはシンプルにshowメソッドを実行する。

$('.hide').show();

しかしこの場合、CSSのimportant指定が優先され、showメソッドが効かなかった。

次に試したのがこちら。

$('.hide').css('display', 'block !important');

しかしこの指定方法でもやはり駄目だった。

cssTextによるスタイル指定

結論、jQueryからimportant指定を行う場合、CSS書式をそのまま記述することができるcssTextを使用する必要があるようだ。

$('.hide').css({'cssText': 'display: block !important;'});

これでようやくjQueryからimportant指定したスタイルを適用することができるようになった。