CSSの!importantをjQueryを使って書く

この記事はだいぶ前に書かれたものなので情報が古いかもしれません
important

おまとめ三行

!importantを足せば良いだけじゃねーのって思うじゃん?
さあ困った。どーしよー。
知っとけば、いざというときに重宝するかも?

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を変更することができる。

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

まだコメントはいただけてないみたい……
もしかしたら何か関連しているかも?