画像のサイズを取得して一定のサイズ以下の場合にClassを付与する方法

2016.6.3

jQurery

サイト制作などで、画像サイズがまちまちなときありますよね。画像サイズが一定よりも小さい時だけに処理がしたい。そういう時に役立つTipsです。

$('img').each(function() {
 var imageObj = new Image();
 imageObj.src = $(this).attr("src");
 var imgh = imageObj.height;
 var addimgClass = parseInt(imgh);//文字列だったら嫌なのでおまじない
   if(addimgClass < 300) {
     $(this).addClass('mvg');
   } else {
     $(this).removeClass('mvg');
   }
});

ひとまず $(‘img’).each(function() で画像を見つけたら全部に対して処理していきます。

 var imageObj = new Image();
 imageObj.src = $(this).attr("src");
 var imgh = imageObj.height;

元画像のsrcを取得し、高さを取得します。

var addimgClass = parseInt(imgh);

ぶっちゃけ数列変換する必要はないんですが、以前詰んだことがあるのでおまじないです。

   if(addimgClass < 300) {
     $(this).addClass('mvg');
   } else {
     $(this).removeClass('mvg');
   }

300以下のheightの場合にClassを追加します。

同じ要領で高さじゃなく、横幅を取りに行ってもいいと思います。