CSS スタイルシートの小技等のご紹介

jQueryでAタグのURLに拡張子.pdfがあったら自動でPDFアイコンを付ける

2014年5月20日
この記事は掲載から1922日経過しています。
情報が古い可能性が有りますのでご了承下さい

横にPDFアイコンが付いたリンクタグを見かけますが、あれをCSSの属性セレクタで拡張子.pdfへのリンクの場合は自動でアイコンを付けるって技が有ります。

こんなの

知ったかぶってますが、現在やっている案件のデザイナーさんから教えて頂きました。

CSS

[css]
a[href $=’.pdf’] {
background-repeat: no-repeat;
background-image: url(pdf.gif);
padding-left:45px;
padding-top:8px;
padding-bottom:8px;
}
[/css]
便利だなぁと思ったのですが、コードを見てIE下位バージョンで使えるのかな?と思い、確認して見ると表示出来ないようで・・・さすがにそろそろIE8以上くらいで考えたいのですが、せっかくなのでjQuery使ってIE6でも表示出来る方法を考えてみました。

こんなの

jQuery

[js]
jQuery(document).ready( function() {
var tag = jQuery("body a");

tag.each(function(){
var href = jQuery(this).attr(‘href’);
if (href != null ) {
href = href.replace(/#/g,”);
if (href.match(/.pdf/i) ) {
jQuery(this).addClass("href_pdf");
}
}
});
});
[/js]

CSS

[css]
.href_pdf{
background-repeat: no-repeat;
background-image: url(pdf.gif);
padding-left:45px;
padding-top:8px;
padding-bottom:8px;
}
[/css]

jQueryでBODY内のAタグを取り出し、.pdfという文字列があったらクラスを当てるってものです。エクセルとかワードとか作っておけば便利っすね。

 
  • このエントリーをはてなブックマークに追加
  • LINEで送る

PAGE TOP