株式会社オートプロジェクト

Columnコラム
  • TOP
  • コラム一覧
  • CSSで指定した!important をjQueryのcssTextプロパティを使い上書きする方法
2023年1月10日
CSSで指定した!important をjQueryのcssTextプロパティを使い上書きする方法

!importantとは? 指定するとどうなる

[!important]は、CSSスタイルが適用される優先順位を最優先にする際に用いられます。
何よりも優先してCSSの指示を効かせるやり方で、CSSスタイルがどうしても効かない場合に使うと、便利です。
ただ、[!important]を使用しすぎると、どのスタイルが優先するか、ブラウザが混乱する為、乱用は避けましょう。

jQueryでの上書きが効かない例

$(‘.txt’).css({‘color’: ‘blue !important’ });

上記の方法ですと、CSSの[!important]が優先してしまい、jQueryでの上書きは出来ないので注意してください。

では、CSSで指定している[color: red !important;]をjQueryの[cssText]で上書きしていきます。

下記はHTML、CSS、jQueryのコードです。

HTML

<p class="txt">cssに指定されている!importantをjQueryで書き換える</p>

CSS

.txt {
color: red !important;
}

jQuery

$('.txt').css({'cssText': 'color: blue!important;'});

以下は実装例です。

See the Pen
Untitled
by 林 (@hayashi-akina)
on CodePen.

テキストの色をCSSで[color:red!important] で指定していますが、jQueryで指定した色、[color:blue!important]に変更されます。

CSS書式をそのまま記述することができる[cssText]を使用すると、CSSでの[!important]指定が優先されることなく、上書きできます。

注意

HTML の style 属性で書いたCSSの場合、[cssText]を使用すると指定されていた CSSが全て無効となってしまうので、注意が必要です。

Webデザイナー / コーダーのみなさまへ

株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。

サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。

>> バックエンドについて、オートプロジェクトに問い合わせをする