ITコラム

jQuery CSS important  cssText attr

jQuery

2018.04.03

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

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 】プロパティの値を取得するサンプル
jQuery【 CSS 】!important で優先度を変更するサンプル(本ページ)
jQuery【 CSS 】hover でカーソルが当たった時の処理を実現するサンプル
jQuery【 CSS 】display を使用した表示・非表示に関するサンプル

目次

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 プロパティの設定を行っています。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.