あかつきのお宿

jQueryでCSSを指定するとき、基本的にはこんな書き方をしますね。

$('div').css('display','block');
$('span').css({'width':'100px'});

ところでCSSには、優先的にスタイルを適用させるために「!important」ってのがあります。

div{display:block!important;}
span{width:100px!important;}

こんな風に書いとくと、後で動的に、例えばspanの横の長さを120pxとかに変更しても、100pxの方が優先されます。つまり120pxにはならないってことですね。

でも場合によっては、importantが適用されてるHTMLをjQueryなどで上書きしたいことがあるかもしれない。

そんなの、通常の書き方に!importantを足せば良いだけじゃねーのって思うじゃん？

$('div').css('display','block!important');
$('span').css({'width':'100px!important'});

残念ながら、これだと動かない。!importantが適用されないどころか、書き方がおかしいと見なされてるか何かで、displayをblockにすることもwidthを100pxにすることもできなくなってしまう。

さあ困った。どーしよー。

こういうときは、「cssText」というのを使います。

$('div').css('cssText','display:block!important');
$('span').css({'cssText':'width:100px!important'});

こうすると、ちゃんと!importantつきでCSSを変更することができる。

知っとけば、いざというときに重宝するかも？