jQuery【 CSS 】!important で優先度を変更するサンプル

colmun_main9665

CSS には 優先度についての様々なルールがありますが、!important 指定をして特定のスタイルを最優先で適用させることもできます。
そして、jQuery で !important 指定をする際には 記述方法にコツや注意点があります。
今回は、jQuery で !important 指定を行うサンプルを紹介します。

jQuery を使用した CSS の設定方法等については、以下のページもご参照下さい。
jQuery【 CSS 】スタイルを動的に変更する
jQuery【 CSS 】colorとfontを変更するサンプル
jQuery【 CSS 】addClass、removeClass を使ってCSSを変更するサンプル
jQuery【 CSS 】toggleClass を使ってCSSの切り替えを行うサンプル
jQuery【 CSS 】プロパティの値を取得するサンプル

目次

 
1.jQuery で !important 指定をする方法
2.cssText で !important を指定
3.特定の CSS のみ優先させる工夫

1.jQuery で !important 指定をする方法

 
ブラウザは ルールに従って CSS の優先度を決定します( 詳しくはCSS 【 優先 順位 】 ~ 適用の仕組みをご参照下さい )が、最優先で適用させたいスタイルがある場合は、CSS で次のように !important 指定を行います。

.wkBox{skyblue:skyblue !important;}

 
そこで、jQuery で CSS に !important 指定をする際には、次のような記述をしたくなります。

$(".wkBox").css({"background-color" : "skyblue !important"});

しかし、この記述では !important 指定ができません。

jQuery で CSS に !important 指定をする際は、「 cssText 」を使用して 次のように記述します。

$(".wkBox").css({"cssText" : "background-color : skyblue !important"});

「 cssText 」は、要素のスタイル属性の値を取得・設定するプロパティで、CSS を動的に一括指定することができます。

上記のように、cssText プロパティに !important 指定を含めた CSS を一括して設定することで、!important 指定が有効となります。

▲目次へ戻る

 

2.cssText で !important を指定

 
jQuery で CSS に !important 指定を行い、背景色を変更します。
下のボックス内で任意の場所をクリックしてみて下さい。

 

 
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $(".wkBox").click(function() {
    // !important を指定
    $(".wkBox").css({"cssText" : "background-color : skyblue !important"});
  });
});
//-->
</script>

<div class="wkBox" style="background-color:#CCC; height:100px;">
 
</div>

背景色の変更のみを意図していましたが、デフォルトで適用されていた CSS が全て排除されてしまったため、高さについての指定( height:100px; )が無効になってしまいました。

cssText プロパティを使用すると、HTML の style 属性で指定されていた CSS が全て無効となってしまうので、注意が必要です。

このような不具合を解消して、意図通りの結果を得るためには、次章のような工夫をします。

▲目次へ戻る

 

3.特定の CSS のみ優先させる工夫

 
先ほどのサンプルを改修して、ボックスの高さはそのままで 背景色のみを変更します。
下のボックス内で任意の場所をクリックしてみて下さい。

 

 
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  // デフォルトのCSSを保持
  var def = $(".wkBox2").attr("style");
  $(".wkBox2").click(function() {
    // 変更したいCSSを追加設定
    $(".wkBox2").css({"cssText" : def + "background-color : skyblue !important"});
  });
});
//-->
</script>

<div class="wkBox2" style="background-color:#CCC; height:100px;">
 
</div>

attr メソッドは、HTML要素の属性を取得・設定することができるメソッドです。
「 var def = $(“.wkBox2”).attr(“style”); 」として、style 属性で指定されている デフォルトの CSS 設定を 変数 def に格納しています。

そして、 デフォルトの CSS 設定に !important 指定付きの CSS を追加して cssText プロパティの設定を行っています。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です