Blog

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

2016.06.03 | jQuery | 178views


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を追加します。

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

このエントリーが役に立ったらシェアしてください


LLC JIRIKI HOME

この記事を書いた人

淵上 喜弘

著者:LLC JIRIKI

合同会社ジリキ 代表社員兼、業務執行社員。
1979年生まれ 兵庫県尼崎市出身・明石市育ち。

川崎医療福祉大学を卒業後、日産サティオ岡山に就職し初年度新人賞をカルロス・ゴーンCEOより受賞。その後NTT関連フレッツ販売会社に再就職し、地域賞2位を受賞。OCN販売表彰2位も同時受賞するとともにBフレッツ単独販売数の記録を打ち立てる。2006年合同会社ジリキ設立。SEO、WEBサイト制作業を開始する。

SEOで「大阪 探偵」や「離婚 行政書士」などのキーワードや「子ども 教材」「スマートフォンケース」など各種キーワードで1位を獲得。サイト制作でも毎日コミュニケーションズ・マイナビ女子オープンのサイトを制作。その後ECサイト運営サポートに着手し、売上月商50万のストアを1年半で1700万の月商に成長させる。

スマートフォンケースなどの商品企画開発も手がけ、楽天ランキングでも1位獲得、家電ジャンルMVPなどECサイトコンサルティングでも実績あり。

現在、グロースハックに注力しており様々な業種のサイトのCVアップをサポート中。チームとしてのグロースハック実績ではKaizenグロースハッカー総合 Top 20%、不動産 Top 10などを頂いています。

プログラミングは本業ではなくあくまでも趣味の一環として取り組んでいます。月1回ペースで東京へ出張へ行っておりますので、機会があれば是非お話をしましょう。

LLC JIRIKI