NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

jQueryでCSS指定するときに「!important」を付与する時の注意

bell賞味期限切れコンテンツ

この記事は公開または最終更新から958日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

jQuery で CSS を指定するときに一緒に「!important」を付けたい場合は、ちょっと書き方を工夫する必要があるということを知ったのでメモ。

「!important」は普通に書いても動かない

jQuery で CSS を操作する場合は、

みたいに書いたりしますよね。

単位もついてるしここに「!important」も付けていいよね?って普通思いますよね??

こんな風に。

でも、これだと動作しません。[*1]

調べてみたところ、こういう時は、「cssText」という書き方をするそうです。

つまり、通常「パラメータ」と「値」を別々に書くところを、普通に CSS を書くようにまとめて書いてしまうことができるんですね。複数指定する場合も連続で書いていけばOKです。

 間に変数を挟むならこんな感じでしょうか?

でもパラメータが増えてきたらちと読みにくそうですね。

2個ですでにこれだし。。

 

 

 

注意するポイント

当たり前かもしれませんが、  .css をメソッドチェーンでつないでも最後の1個しか有効になりません。

例えばこれだと高さの指定は通らなくなります。

cssTextの中身で指定してるパラメータが異なっても、jQuery 的にはどっちも cssText というパラメータの値にすぎないので、 cssText の内容が連続してる=前のを更に上書きしている、ってことなんだと思います。

こんな風に分けて書ければかなり見やすくなってメンテナンスしやすくなると思うんだけどなぁ…。

ということで、こういう場合はこんなふうにして配列にしておくと、後で読みやすいかもしれません。

 これを実行すると

だいぶマシになった気がします

参考:

#2066 (.css({height: “300px !important”})) – jQuery Core – Bug Tracker

TAGS