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」を使う際のご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでCSSの「!important」宣言の扱い方

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner