【jQuery】cssの値に数値をたす

電脳備忘録

要素の高さ合わせる系のjQueryプラグインを利用すると、一番縦長の要素の値を指定した要素すべてに反映してくれるのですが、 今回はちょっとそのままではだめで、反映された値に決まった値を足す必要があったので対応しました。
プラグインをカスタマイズするとかいろんな意味で面倒なので、プラグインが吐き出した値を調整するというアプローチをとりました。

最初、丁寧に値を取得してそれに数値を足したものを再度反映するというアプローチをとったのですが、IE8のくそ野郎に見事に阻止されてしまいました...。
IE8だと下記の方法では値を取れなかったですね。「NaN」を返されました...。

$(function(){
var getHeight = parseInt($('.wrap').css('min-height'));
var newheight = getHeight + 35;
$('.wrap').css('min-height', newheight);
});

IE8のせいで別の方法で対応せざるを得なくなってしまいました。面倒ですね。
今回の場合で言えば「取得できないなら直接足せばいいじゃない」ということで対応しました。

$(function(){
$('.wrap').css({
'min-height': '+=35px'
});
});

margin-leftの値に「+=Npx」のように記述すると現在のpx値に+Npxした状態にしてくれます。
マイナスにしたい場合は「-=Npx」と書けばOKです。

[jQuery]cssメソッドやanimateメソッドで相対的なピクセル値を指定する簡単な方法 - Codaholic

広告

ブログの維持費に充てるでございます・・・。