【レスポンシブ】imgタグのalt属性をjQueryでテキストとして出力する

• Web Create
• 2016.09.29

見出しなどのテキストを画像で作成することがよくあるのですが、
レスポンシブでスマホ閲覧時はテキストにしたかったので、
JSでalt属性をテキストとして出力させることで対応しました。

サンプルソース

HTML

例えばH2を画像で作ったとします。
クラスにaltTextを指定してください。

<h2 class="altText"><img src="https://try-m.co.jp/wp-content/uploads/2016/09/150x150.png" alt="ALTテキスト"></h2>

CSS

PCとSPの出し分けのためのクラスを作ります。
.pcはPC閲覧時のみ、.spはSP閲覧時のみ表示されます。

.sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}

JS

altTextのクラスを指定した要素にイベントが発生します。

$(function(){

  $('.altText').each(function(){

    alt = $(this).find('img').addClass('pc').attr('alt');
    $(this).prepend('<span class="sp">' + alt + '</span>');

  }); 

});

imgには自動的に.pcが付与されるのでSP閲覧時は非表示になります。

動作デモ

ウィンドウサイズを変更して試してみてください。