CSSの指定には優先順位というものが存在しています。
CSSの指定をしても他の個所でより優先順位の高い記述で指定がしていある場合、CSSを変更する場合はさらに優先順位の高い記述で指定する必要があります。
その中でも一番優先順位の高い最優先で適用させることの出来る記述方法が!importantを指定する方法です。
今回の記事ではjQueryでCSSの操作をする際、!importantを指定する方法をご紹介します。

jQueryでCSSの!important指定する方法

jQueryでCSSの!important指定する場合、以下のように記述しまうのではないでしょうか？

<p class="text">【jQuery】CSSの!important指定する方法</p>

$(function() {
    $(".text").css({"color":"red !important"});
});

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

しかし、この記述方法では!importantを指定することは出来ません。

そこで、jQueryでCSSの!important指定する場合、以下のように「cssText」を使用して以下のように記述する必要があります。

<p class="text">【jQuery】CSSの!important指定する方法</p>

$(function() {
    $(".text").css({"cssText":"color: red !important;"});
});

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

このように「cssText」を使用して指定することで!important指定することが出来ます。

cssTextを使用する場合の注意点

「cssText」を使用してCSSを操作することで!important指定も出来るため、常にこの方法で指定する方がいいのではと思うかもしれませんが、「cssText」を使用する場合、注意が必要な点があります。
それは「cssText」を使用するとスタイル属性を一括で操作してしまうため、直接HTMLに記述していたスタイル属性のCSSや他の操作で指定しているスタイル属性のCSSの記述が全て削除されてしまいます。
そのため「cssText」を使用する場合は少し工夫が必要になり、事前にスタイル属性に指定されている内容を取得し、それに追記する形で「cssText」を指定する必要があります。
こうすることで一括操作する場合でも事前に指定してある指定が削除されることはありません。

以下は事前にスタイル属性を取得せず「cssText」を指定した場合の例です。

<p class="text" style="font-weight: bold;">【jQuery】CSSの!important指定する方法</p>

$(function() {
    $(".text").css({"cssText":"color: red !important;"});
});

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

このように、colorを!important指定することは出来ましたが、予め指定してあったfont-weightの指定が消えてしまいました。

少し工夫し、以下は事前にスタイル属性を取得し、それに追記する形で「cssText」を指定した場合の例です。

<p class="text" style="font-weight: bold;">【jQuery】CSSの!important指定する方法</p>

$(function() {
    let style = $(".text").attr("style");
    $(".text").css({"cssText":style + "color: red !important;"});
});

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

このように事前に指定してあるfont-weight: bold;の指定が消えることなく、jQueryでCSSの指定を追加することが出来ます。

まとめ

いかがでしたか？
今回の記事ではjQueryでCSSの!important指定をする方法をご紹介しました。
CSSで!important指定するとCSSの優先順位が把握しずらくなるためあまり多く使用することはオススメ出来ませんが、jQueryでもCSSの!important指定が出来るということを知っておくだけでもいつかのためになるかもしれませんね。