1

不明なカスタム データ属性を持つ要素を照合する方法はありますか? 不明とは、要素が次のように見えることを意味します。

<div data-unknown="foo"></div>

また

<td data-someOtherCustomDataAttribute="bar"></td>

そして、data-* 属性を持つすべての要素に一致させたいと考えています。つまり、divタグとtdタグの両方が一致する必要があります。値を照合する方法は知っていますが、属性自体は知りません。

手がかりはありますか？

4

4 に答える 4

1

CSS自体にはこのためのツールはありません。

属性の存在によって要素を選択する方法は1つだけですselector[attribute]。また、属性の外観のパターン（たとえば、正規表現など）を定義する方法はないため、属性名を設定するだけで済みます。

于 2012-07-29T10:11:50.007 に答える
1

セレクタには特別なクラスがあります。それらは「属性セレクター」と呼ばれます。前の回答では、同様の解決策が提案されましたが、値が必要でしたが、私の場合はそうではありません:)

次のようになります。

[data-unknown]{
    color: red;
}

基本的に - 属性全体を繰り返しdata-unknownますdata-anything_you_want。

実際の例は、http: //jsfiddle.net/skip405/2vhBj/で見ることができます。

于 2012-07-29T15:22:40.063 に答える
0

次のようなことができます。

div[attribute=value]
{
    /*css here...*/
}

セレクターにスペースを入れないことが非常に重要です。

ただし、未知の属性に対して機能するかどうかはテストしていません。css は XML のスタイルも設定できるため、そうする必要があります。

于 2012-07-29T12:32:07.657 に答える
-1

HTML5のdata-attributesを使用していて、HTML5 JavaScriptのdatasetelementプロパティをサポートするブラウザーがある場合は、動的に選択できます（例を短くするためにjQueryを使用しています）。

$('.contains-data').each( function() {
    $(this).dataset().each( function (key, value) {
        if (value != '') { // put your "selector" criteria here
             alert(key + ': ' + value);
        }
    }
});

クラス「contains-data」を持つすべてのページ要素を最初に選択するためのもう少しの作業で、jQueryなしで同じことを達成できます。

この戦略ではJavaScriptを使用する必要があるため、YMMVを使用します。

詳細については、HTML5カスタムデータ属性（data- *）：JavaScriptでのdata-attributesの使用を参照してください。

于 2012-08-16T15:44:00.217 に答える