jQuery で CSS を指定するときに一緒に「!important」を付けたい場合は、ちょっと書き方を工夫する必要があるということを知ったのでメモ。
「!important」は普通に書いても動かない
jQuery で CSS を操作する場合は、
|
1 |
$('#foo').css('height','600px'); |
みたいに書いたりしますよね。
単位もついてるしここに「!important」も付けていいよね？って普通思いますよね？？
|
1 |
$('#foo').css('height','600px !important'); |
こんな風に。
でも、これだと動作しません。 ((ふるーいバージョンかつふるーいブラウザを使ってると動いたりするらしいですが…。))
調べてみたところ、こういう時は、「cssText」という書き方をするそうです。
|
1 |
$('#foo').css({'cssText':'height: 600px !important;'}); |
つまり、通常「パラメータ」と「値」を別々に書くところを、普通に CSS を書くようにまとめて書いてしまうことができるんですね。複数指定する場合も連続で書いていけばOKです。
|
1 |
$('#foo').css({'cssText':'width: 100%; height:600px !important;'}); |
間に変数を挟むならこんな感じでしょうか？
|
1 2 3 4 |
var newH = $(window).height() / 2; $('#foo').css({ 'cssText':'height:' + newH + 'px !important;' }); |
でもパラメータが増えてきたらちと読みにくそうですね。
|
1 2 3 |
var newH = $(window).height() / 2; var newW = $(window).width() / 2; $('#foo').css({'cssText':'height: ' + newH + 'px !important; width: ' + newW + 'px !important;'}); |
2個ですでにこれだし。。
注意するポイント
当たり前かもしれませんが、 .css をメソッドチェーンでつないでも最後の1個しか有効になりません。
例えばこれだと高さの指定は通らなくなります。
|
1 2 3 4 5 |
var newH = $(window).height() / 2; var newW = $(window).width() / 2; $('#foo') .css({'cssText':'height: ' + newH + 'px !important;'}) .css({'cssText':'width: ' + newW + 'px !important;'}); |
cssTextの中身で指定してるパラメータが異なっても、jQuery 的にはどっちも cssText というパラメータの値にすぎないので、 cssText の内容が連続してる＝前のを更に上書きしている、ってことなんだと思います。
こんな風に分けて書ければかなり見やすくなってメンテナンスしやすくなると思うんだけどなぁ…。
ということで、こういう場合はこんなふうにして配列にしておくと、後で読みやすいかもしれません。
|
1 2 3 4 5 6 7 |
var newH = $(window).height() / 2; var newW = $(window).width() / 2; var newParams = { 'height':'height: ' + newH + 'px !important;', 'width':'width: ' + newW + 'px !important;' }; $('#foo').css({'cssText':newParams.height + newParams.width}); |
これを実行すると
だいぶマシになった気がします
参考：
#2066 (.css({height: “300px !important”})) – jQuery Core – Bug Tracker
コメントする