[jQuery]jQueryを使って画像をいろいろやってみる

jQueryを使って画像をいろいろ操作してみます。

いろいろといっても、基本中の基本かもしれないですが・・・。

画像の幅属性を取得する

画像の幅属性を取得し、何かするには以下のようなかんじで。

jQuery("img").each(function(){
    var width = jQuery(this).attr("width") ;
}) ;

画像の高さ属性を取得する

画像の高さ属性も幅属性を取得するのと同じように出来ます。

jQuery("img").each(function(){
    var height = jQuery(this).attr("height");
});

画像につけられたクラス名を取得する

画像だけに限らず、要素に当てられたクラス名を取得するには以下のような感じです。

jQuery("img").each(function(){
    var class = jQuery(this).attr("class");
}) ;

画像につけられたalt情報を取得する

画像につけられたalt（代替テキスト）を取得するには以下のような感じになります。

jQuery("img").each(function(){
    var alt = jQuery(this).attr("alt") ;
});

また、alt属性を持っている画像のみ抽出するには以下のようになります。

jQuery("img[alt]").each(fucntion(){
    var alt = jQuery(this).attr("alt");
});

ここで頻繁に使っている「each」ですが、これは多用しすぎるとscriptの実行速度が低下する場合があります。

なので、eachの多用はあまりおすすめしません。

ここに書いた例はあくまでも一例ですので、他にもっと効率が良い描き方などは存在するはずです。

テスト的に使う程度で利用するのがいいかもです。