jQueryを使ってページ内でのあらゆる制御をする際、
コンテンツ要素の表示／非表示を切り替えたりアニメーションを付けたりするには
CSSのSTYLE属性を制御してプロパティに指示を与えることになります。
そのようなCSSのプロパティを制御する際に、
「!important」宣言をどうしても使いたい状況が意外と出てくるので、
jQueryでSTYLE属性を扱うの際の「!important」宣言の扱い方について
メモ書き程度に紹介してみます。
jQueryでCSSの「!important」宣言の扱い方
jQueryで単純にCSSプロパティを制御する記述で
【例】——————————————————
$(‘a’).css({color:’#ff0000!important’});
————————————————————
と単純にプロパティ値の後ろに「!important」宣言をつけても動作してくれるのは、
jQueryの古い1.2.1辺りのバージョンで「IE6、IE7、Firefox2、Safari2」といった
古いブラウザのみの対象になっているようです。
現行のバージョンで「!important」を使用するには
「cssText」というのを使って下記の様に記述します。
◆SCRIPT
$('a').css('cssText','color:#ff0000!important;');
「cssText」と指定するプロパティをカンマで分けて記述します。
プロパティが複数ある場合は下記の様に。
◆SCRIPT
$('a').css('cssText','color:#ff0000!important;font-size:100%;font-weight:bold!important;');
この場合、指定した要素のSTYLE属性がまるっと書き換わることになるみたいなので
何か変数で値を制御してプロパティ値を制御する必要がある場合には、
「cssText」の後に切り分けた形で続けて書く必要がありそうです。
◆SCRIPT
var textWidth = $('a').css('width');
$('a').css('cssText','color:#ff0000!important;font-size:100%;font-weight:bold!important;').css({width:(textWidth)});
↑ 少々強引な例文ではありますが。。。
このCSS「!important」宣言の使い方については
jQuery本家サイトでは以下のページに解説してあります。
#2066 (.css({height: “300px !important”})) – jQuery Core – Bug Tracker
jQueryで「!important」を使う際のご参考までに。。。