1

私の目標は、ファイル名のリストを作成することであり、すべてのアイテムの近くに、そのファイル拡張子の画像がその横に表示されます。

それを行う良い方法があります：

p[icon^=".gif"]
{
background: url(images/gif.png) no-repeat center left)
}

これは、「p」要素のアイコン属性が .gif で終わっているかどうかをチェックします。存在する場合は、指定されたスタイルをその要素に適用します。

しかし、すべてのファイルタイプを定義するのではなく、この形式のアイコンを持つフォルダーがあるため、一般的なものにしたい: {file-extansion}.png

指定された拡張子を持つ一致するファイルがない場合、またはファイル拡張子がない場合は、「default.png」のデフォルト パスが存在します。

それまたはその一部を行うオプションはありますか？いいえの場合、どのようにアドバイスしますか？

ちなみに、私はcss/javascriptの専門家ではないので、あなたの答えを理解できるように十分な詳細を教えてください.

4

2 に答える 2

1

これにはjQueryライブラリを使用できます：

HTML

<p data-ext=".gif">Text</p>
<p data-ext=".png">Text</p>
<p data-ext=".jpg">Text</p>

CSS

p {
    background-repeat: no-repeat;
    background-position: 0 50%;
}

JavaScript

$("p[data-ext]").each(function() {
    var ext = $(this).data("ext").substring(1);
    $(this).css("background-image", "url(images/" + ext + ".png)");
});

各（または何でも）タグにdata-ext属性を追加するように機能します。pjQueryは、属性pを持つすべてのタグを選択しdata-ext、属性値を取得してbackground-image、各要素を変更します。

デモ: http://jsfiddle.net/AEsx4/

于 2012-05-09T16:26:24.990 に答える
1

純粋な CSS を使用すると、URL で属性を動的に参照することはできませんが、属性をコンテンツにすることはできます。純粋な CSS を使用した不十分な回避策と、最終的に希望的観測アプローチを次に示します :(

クラスを使用する

<div class="jpg">
</div>


/* css */
.jpg {
   background: url("/img/jpg.jpg");
}

これはうまく機能しますが、拡張機能ごとに 1 つのクラスが必要です。

属性セレクターを使用する

<div data-ext="jpg"></div>

div[data-ext=jpg] {
   background: url(/img/jpg.jpg);
}

このアプローチの詳細については、http: //css-tricks.com/attribute-selectors/を参照してください。

HTML では、ランダムなタグを追加することは実際には想定されていdata-extないため、HTML の作成者data-*が有効な HTML5 を提供してくれたので、それを使用して何でもできます。いずれにせよ、拡張機能ごとに新しい CSS セレクターを作成する必要があります。良くない。

純粋なCSSで取得できる最も近い

<div data-ext="jpg"></div>

div:after {
   content: attr(data-ext);
}

div の横に拡張機能の名前が表示されます。これはほとんど機能しますが、十分ではありません。

CSS 関数の詳細: http://www.suburban-glory.com/blog?page=130

実際に欲しいもの

<div data-ext="jpg"></div>

div:after {
   content: url("/img/jpg." attr(data-ext));
}

悲しいことに、これは現時点では機能していないようですが、少年は素晴らしいでしょう.

于 2012-05-09T17:48:22.500 に答える