1つのHTML「data-」要素に複数の値を設定できますか？

Question

1つのHTML「data-」要素に複数の値を設定できますか？クラスが複数のクラス名を持つ方法と同様です。

可能であれば、1つの "data-"要素を使用してすべてのライブラリスタイルを格納するCSS/JSライブラリを作成したいと考えています。たとえば、次のようになります。

<div data-library-name="xs-hidden col-md-10 col-xl-8 big-hero"></div> 

このようにして、プログラマのカスタムスタイルルールのどれでも要素クラスに入ることができます。

<div class="custom-style another-style" data-library-name="xs-hidden col-md-10 col-xl-8 big-hero"></div> 

Answer 1

私の知る限り、私はdata-属性は、配列にそれを変換することができるとは思わない：このための私の推論はとても一緒には次のようになり、可読性を容易にするためです。代わりに、私はそれを1つの値として解釈すると思いますが、はです。

これを行うには、後でsplit() JavaScriptの後に使用可能な値の配列にする必要があります。

JSFiddle.netのthis exampleを参照してください。

Answer 2

HTMLの「データ」要素に複数の値を設定できますか？

文字列を使用できます。この仕様では、属性内のデータの特定のフォーマットは定義されていません。サイト固有のJavaScriptによって処理されるように設計されています。 JavaScript。

クラスが複数のクラス名を持つ方法と同様です。

class属性は、スペースで区切られたクラスのリストを取ります。

あなたのご希望の場合は、JavaScriptをyour_data_attribute_value.split(" ");にできます。

これをCSSで処理すると、~=attribute selectorが使用されます。

[ATT〜=ヴァル]
正確であるそのうちの一つ、「ヴァル」の値単語の空白で区切られたリストであるATT属性を持つ要素を表します。 "val"に空白が含まれていれば、（空白で区切られているので）何も表しません。また、 "val"が空文字列の場合、それは決して何も表しません。

Answer 3

CSSにはショートカット.classがありますが、実際にはスペースで区切られた値のリストとして "class"という名前の属性が解析されています。これは、以下の属性セレクタにより非ショートカット形式でサポートされている：

[att~=val]

は、のいずれかの値の単語の空白で区切られたリストであるATT属性を持つ要素を表し正確に "val"です。 "val"に空白が含まれていると、（空白で区切られているので）何も表示されません。 "val"が空の文字列の場合、それは決して何も表しません。

参考：http://www.w3.org/TR/CSS2/selector.html#class-html

ご質問は、あなたはおそらくその探しているCSSをタグ付けされています。属性値の解析がどのように行われるかはそのドキュメントにも記載されていますので、もしあなたが使用しようとしているjavascriptライブラリがそれをカバーしていない場合は、追加するのは簡単です：

var list = $("div").data("library-name").split(/\s+/); 
             ^^^^^^^^^^^^ 

この空白の正規表現を使用して分割すると、文字列の属性値がjavascriptおよびDOMとデータ属性にアクセスするためのJqueryライブラリを含む配列に解析されます。